1

私はこれに対する解決策を一日中探していて、画像のサイズ変更、DOM ノードの検索、Wordpress の機能、およびこれを行うための他の可能な方法に関する多くの記事を読みました。

シナリオはこちら...

クライアント用にWordpressのカスタムテーマを作成しています。これは新聞サイトであり、ページの特定のボックス内に収まるように画像を比例的に自動サイズ変更する機能が必要です。通常width:SomeWidthは CSS で設定するだけですが、img を識別する方法がありません。

私のインデックス ページはフレームワークであり、wordpress エンジンがコンテンツを読み込みます。これは、ユーザーに表示されるまで、画像の属性を制御できないことを意味します。(はい、手動ですべての写真のサイズを変更できますが、私のクライアントはそれを行う必要はなく、単一のページで元のサイズにすることも望んでいます.

ボックスの 1 つを次に示します。

<div class="box-center">
        <h1>Music 101</h1>
        <div class="box-inner-center">
            <ul>
                <?php
                    global $post;
                    $args = array('numberposts'=>1,'category'=>get_cat_ID('Music 101'));
                    $myposts=get_posts($args);
                    foreach($myposts as $post) : setup_postdata($post); ?>
                        <li><?php the_content(); ?></li>
                    <?php endforeach; ?>
            </ul>
            <a class="more" href="<?php echo esc_url(get_category_link(get_cat_ID('Music 101'))); ?>">More Music 101 >></a>
        </div>
    </div>

ページが読み込まれると、次のようになります。

<div class="box-center">
    <h1>Music 101</h1>
        <div class="box-inner-center">
            <ul>
                <li>
                    <p>
                        <a href="http://***?attachment_id=150" rel="attachment wp-att-150">
                            <img class="alignnone  wp-image-150" alt="Venice Symphony Orchestra" src="http://***/Venice-Symphony-Orchestra.jpg" width="960" height="640">
                        </a>
                    </p>
                    <p><span style="color: #000000;"><b><i>Some sample text.</i></b></span></p>
                    <p><span style="color: #000000;"><b>By Someone</b></span></p>
                    <p><span style="color: #000000;">Some quote and more content</span></p>
                    <p><span style="color: #000000;"><a href="http://***?p=141#more-141" class="more-link">(more…)</a></span></p>
                </li>
            </ul>
            <a class="more" href="http://***/?cat=20">More Music 101 &gt;&gt;</a>
        </div>
    </div>

document.getElementById("box-center").childNodesを使用して、結果document.getElementByTagName("img")をforループしてそこにプロパティを設定しようとしましたが、上記の行はどういうわけか結果を返しません。

可能であれば、JQuery やその他のライブラリを使用しないことをお勧めします。

お時間をいただきありがとうございます。

4

2 に答える 2

2

これは、クラス 'box-inner-center' を持つ要素内の <img> の最初の出現のサイズを変更することを前提としています

var thebox = document.getElementsByClassName('box-inner-center')[0];
var theimg = thebox.getElementsByTagName('img')[0];
theimg.style.width = '100px';
于 2012-12-31T22:05:03.487 に答える
2

CSSを使えない理由がわかりません。私は次のようなことを提案します：

.box-center .box-inner-center img {
    width:150px; /* or whatever */
    height:auto; /* overrides the set HTML height*/
}

これにより、画像自体の幅と高さの属性が上書きされ、必要に応じてより具体的にすることもでき.box-center .box-inner-center ul p > a imgます。

于 2012-12-31T22:10:09.523 に答える