3

如果我有以下 HTML：

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

div2并div3有自己的 CSS 定义了字体大小等。有没有办法可以div1统一减小字体大小？也就是说，采用和中定义的字体大小div2并div3通过say 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。有关字体大小单位类型CSS FONT-SIZE: EM VS的比较，请参阅本文。PX VS。PT VS。百分

.div1{
    font-size:16px;
}

.div2{
    font-size:80%;
}

.div3{
    font-size:90%;
}

这也是我在我的网站中用来设置字体大小的内容：

/* 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。这也使得使用jQuery ui库更容易，因为它们使用相同的字体大小设置。

于 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's font-size， .div2 和 .div3's font-sizes 会按比例改变。

于 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 的字体大小。显然，这可能不太适合您……但是您可以做一些事情来修改代码。你可以得到你的顶级 divdocument.getElementById('id');然后在子节点上设置样式

于 2012-07-11T02:44:46.610 回答