[英]How to change the font-size uniformly?
如果我有以下HTML:
<div class="div1">
<div class="div2">
</div>
<div class="div3">
</div>
</div>
div2
和div3
有自己的CSS,字體大小等定義。 有沒有辦法可以統一減少div1
的字體大小? 也就是說,采用div2
和div3
定義的字體大小並將它們div3
2px
? 這類似於如何Select All -> Ctrl + Shift + <
在文字處理軟件中將所選文本的大小減少1個點。 有什么建議么?
我認為這就是你想要的:
演示: 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;
}
如果您使用百分比或em設置font-size,那么您可以,但不能使用像素。 使用以下示例如果更改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庫變得更加容易,因為它們使用相同的字體大小設置。
如果你在ems
設置內部div的字體大小,這是微不足道的。 如果你有這個......
.div2 {
font-size: 1.8em; /*180% of inherited font-size */
}
.div3 {
font-size: 1.4em; /*140% of inherited font-size */
}
...然后,如果你改變div1的font-size
,.div2和.div3的font-size
將按比例改變。
我不認為你可以用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; }
用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 document.getElementById('id');
然后在子節點上設置樣式
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.