1

画像ごとにテキスト ボックスを含むカルーセルがあり、クライアント (HTML について何も知らない) は、WYSIWYG テキスト エディターを使用してテキスト ボックスを編集します。結果の出力は、最悪の悪夢に似ています。何かのようなもの：

<div class="carousel-text-container">
<span style="font-size:18pt;">
    <span style="font-weight:bold;">
         Lorem 
         <span style="font-size:15pt;">Dolor</span>
     </span>
    Ipsum
    <span style="font-size:19pt;">
         <span>&nbsp;</span>
         <span>Sit<span>Amet</span></span>
    </span>
</span>
</div>

このサイトは、小さいモニターに対応するために 3 つの異なるサイズで表示する必要があるため、CSS メディア クエリを使用してサイトのサイズを変更しています。

テキストボックス内のテキストのサイズを正しく変更できません。jQuery.fn.cssの各要素のフォント サイズを取得しpx、それを に変換するために使用しようとしましたem。次に、 にfont-size:x%一種の宣言を設定する.carousel-text-containerことで、すべてが適切にサイズ変更されることを期待しました。

残念ながら、em での font-size の適用方法には再帰的な性質があるようです。つまり.example、親も影響を与えているため、以下では適切にサイズ変更されません

<span style="font-size:2em;">
    Something
    <span class="example" style="font-size:1.5em;">Else</span>
</span>

のすべての子に対して、元のフォントサイズ、マージン、パディング、行の高さなどの真の割合を達成できるように、すべてを確実かつ正確にサイズ変更するにはどうすればよい.carousel-text-containerですか?

今、私はある種の再帰的な JavaScript 関数を想像している段階です。

var carouselTextBoxEl;
function resizeCarouselTextBox () {
    // some example numbers thrown in
    var newWidthRatio = .8,
    function resizeCarouselTextBoxEl (el, nestedLevelNum) {
        nestedLevelNum = nestedLevelNum || 1;
            
        var childElFontSizePxStr = parseFloat(el.css('font-size')), // 16.2984392, for example
            // calculate new font size based on
            // width ratio of original size site to new size,
            // and do something with nestedLevelNum... what's the math with that?
            newChildElFontSizePxStr = childElFontSizePxStr * newWidthRatio,
            // get children of el, if any
            elChildrenEls = el.children(),
            i = elChildrenEls.length;
            
            el.css('font-size', newChildElFontSizePxStr + 'em');               
            while (--i >= 0) {
                resizeCarouselTextBoxEl(elChildrenEls[i], nestedLevelNum + 1);    
            }

    }
    
    carouselTextBoxEl.children().each(function () {
        resizeCarouselTextBoxEl($(this)
    });    
}
onSmallerScreen(resizeCarouselTextBox);

更新: クライアントが特定の単語のサイズを変更して見出しなどに使用できるようにしているため、単純にすべてを単一のフォント サイズに設定することはできません。

HTML5 キャンバス内に配置して、スナップショットを取得したり、そのようにサイズ変更したりすることは可能でしょうか?

4

1 に答える 1

0

これはCSS（Cascading Style Sheets）の性質であり、すべての子要素が親のスタイルを継承します:)

jQueryを使用して、指定されたコンテナーのすべての子要素を動的に選択し、それらのフォントサイズを変更します。

$('.carousel-text-container').find('*').css('font-size', '14px');

または、フォントサイズを削除して、すべての子要素が.carousel-text-containerクラスに対して宣言されたフォントサイズを使用するようにすることもできます。

$('.carousel-text-container').find('*').css('font-size', '');
于 2012-11-19T22:23:23.467 に答える