3

次のHTMLがある場合：

<div class="div1">
   <div class="div2">
   </div>
   <div class="div3">
   </div>
</div>

div2div3フォントサイズなどが定義された独自のCSSがあります。div1フォントサイズを一律に小さくする方法はありますか？つまり、で定義されているフォントサイズを取得し、次のようにdiv2縮小div3します2pxか？Select All -> Ctrl + Shift + <これは、ワードプロセッシングソフトウェアで選択したテキストのサイズを1ポイント縮小する方法と似ています。助言がありますか？

4

5 に答える 5

4

私はこれがあなたが望むものだと思います：

デモ： http： //jsfiddle.net/SO_AMK/JjutY/

HTML：

<div class="div1">
   <div class="div2">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
   <div class="div3">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
    <button class="increaseFontSize">Increase Font Size</button>
</div>​

jQuery：

$(".increaseFontSize").click(function(){
        var fontSize = getFontSize($(".div3"));
        var newFontSize = fontSize + 2;
        $(".div3").css("font-size", newFontSize);
        return false;
});
function getFontSize(element) {
    var currentSize = $(element).css("font-size");
    var currentSizeNumber = parseFloat(currentSize);
    return currentSizeNumber;
}

</ p>

于 2012-07-11T02:55:59.547 に答える
3

フォントサイズをパーセンテージまたはemで設定すると、可能ですが、ピクセルではできません。次の例では、div1のフォントサイズを変更すると、div2とdiv3の両方に影響します。フォントサイズの単位タイプCSSFONT-SIZE：EM VSの比較については、この記事を参照してください。PX VS. PT VS. パーセント

.div1{
    font-size:16px;
}

.div2{
    font-size:80%;
}

.div3{
    font-size:90%;
}

また、フォントサイズを設定するためにWebサイトで使用するものは次のとおりです。

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

body要素のようなfont-sizeプロパティを設定することにより、他のすべてのfont-sizeの設定は100％=10pxとして簡単になります。これにより、同じフォントサイズの設定を使用するため、jQueryuiライブラリの使用も非常に簡単になります。

于 2012-07-11T02:39:33.287 に答える
2

内部divのフォントサイズをems簡単に設定できます。あなたがこれを持っていたら...

.div2 {
    font-size: 1.8em; /*180% of inherited font-size */
}

.div3 {
    font-size: 1.4em; /*140% of inherited font-size */
}

...次に、div1を変更するfont-sizeと、.div2と.div3font-sizeは比例して変更されます。

于 2012-07-11T02:42:03.687 に答える
1

私はあなたがcssでそれをすることができるとは思いませんが、誰かが私をどれほど親切に教育するかを知っているなら。

私が考えることができる唯一の解決策は、div2とdiv3の要素が影響を受けないようにそれらをネストすることです。これは、div1要素の下にネストされたdiv2とdiv3にのみ影響します。

    div.div2 { font-size:14px; }
    div.div3 { font-size:12px; }

    div.div1 div.div2 { font-size:12px; }
    div.div1 div.div3 { font-size:10px; }
于 2012-07-11T02:35:50.570 に答える
1

javascriptの基本的な考え方：

var divs = document.getElementsByTagName('div');
for(int i = 0; i < divs.Length; ++i) {
  var element = divs[i];
  element.style.setAttribute('font-size', '2px');  //whatever you need to set it to
}

上記は、すべてのdivのフォントサイズを変更します。明らかに、これはおそらくあなたのためにそれを完全に行うつもりはありません...しかし、あなたはコードを変更するためにいくつかのことをすることができます。document.getElementById('id');でトップレベルのdivを取得し、子ノードでスタイルを設定できます

于 2012-07-11T02:44:46.610 に答える