使用em調整所有包含JavaScript元素的元素

我有一種情況，我認爲使用'em'度量標準是完美的。我有一個裏面有幾個元素的容器。這些元素都使用em來表示尺寸，字體大小，邊框等等。我希望能夠通過簡單地更改父容器的em值來動態增大或縮小所有這些元素。使用em調整所有包含JavaScript元素的元素

至少這是我的理論。我試圖用jQuery實現這樣的東西，但它似乎將所有內容都轉換爲px，並且更改em對子元素沒有影響。

下面是一個例子：

<div id="parent"> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
</div> 

<style> 
    #parent { font-size: 1em; } 
    .child { width: 10em; height: 10em; font-size: 5em; } 
</style>

使用JavaScript（jQuery的這個例子），我希望能夠做這樣的事情：

$('#parent').css('font-size', '2em') // This would make everything grow 
$('#parent').css('font-size', '.5em') // This would make everything shrink

這條線不會產生錯誤。但是，進一步檢查後，似乎所有內容都已轉換爲px值。因此，父母的價值觀失去了力量。這裏是我的意思是：在頁面呈現

後，我通過Firebug控制檯

$('#parent').css('font-size'); // Returns 100px (for example's sake) 
$('.child:first').css('font-size'); // Returns 50px 
$('#parent').css('font-size', '2em'); // This should affect all children 
$('#parent').css('font-size'); // Returns 20px 
$('.child:first').css('font-size'); // STILL Returns 50px

運行這些命令，你可以看到，所有的孩子都保持在50像素。

我對此有何看法？我錯過了什麼？這真的比我想象的難得多嗎？從某種意義上說，我試圖重複瀏覽器縮放的效果。

感謝您的任何幫助。

來源

2009-06-28 Mike B

您嘗試使用百分比調整文本的大小。評論後

$('#parent').css('font-size', '200%')// This would make everything grow 
$('#parent').css('font-size', '50%') // This would make everything shrink

編輯 - 使用FF2.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>test</title> 
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> 
    <style type="text/css"> 
    body {font-size:10px;} 
    #parent { font-size: 1em; } 
    .child { width: 10em; height: 10em; font-size: 5em; } 
</style> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     alert($('#parent').css('font-size')); // Returns 10px (for example's sake) 
     alert($('.child:first').css('font-size')); // Returns 50px 
     $('#parent').css('font-size', '200%'); // or you can use 2em here 
     alert($('#parent').css('font-size')); // Returns 20px 
     alert($('.child:first').css('font-size')); // Returns 100px 
    }); 
</script> 
</head> 
<body> 
<div id="parent"> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
    <div class="child">Text</div> 
</div> 
</body> 
</html>

來源

2009-06-29 00:15:23 Emily

但是是多米諾骨牌效應不可能？我必須對所有需要的樣式規則（寬度，高度，字體大小，邊框等）的所有孩子使用此技術。我猜想遞歸遍歷是可能的，但我希望避免這樣的事情。 – 2009-06-29 00:24:23

上述工程只是在Opera，FF和IE6（不能測試等）對我很好。使用這兩個調用可以增長和縮小文本。

$('#parent').css('font-size', '2em'); // grows 
$('#parent').css('font-size', '0.5em'); // shrinks

之前我調用其中的那些

alert($('#parent').css('fontSize'));  // 16px in Opera,FF,IE6 
alert($('.child:first').css('fontSize')); // 80px in Opera&FF, 400px in IE6

通話後

$('#parent').css('font-size', '0.5em'); // shrinks 
alert($('#parent').css('fontSize'));  // 0.5em in Opera,FF,IE6 
alert($('.child:first').css('fontSize')); // 45px Opera, 40 px FF, 200px in IE6

所以瀏覽器（版本）和jQuery版本，你使用的是什麼要說的嗎？

來源

2009-06-29 00:33:09 jitter

這是很棒的東西，我剛剛切換到EM-S，並努力爲字體設置適當的高度divs的情況下。感謝這篇文章，我做了這樣的事情（我真的不知道javascript）：

$(document).ready(function(){ 
    s=$('#parent').css('font-size');  
    s=(s.substring(0,s.length-2)); 
    x=s*1; //the only way I know to convert string to number 
    height1=document.getElementById('div-a').offsetHeight/x; 
    height2=document.getElementById('div-b').offsetHeight/x; 
    if (height1>height2) { 
     document.getElementById('div-b').style.height=height1+"em"; 
     //(...) 
    }});

來源

2009-07-16 17:16:16

使用em調整所有包含JavaScript元素的元素

回答

相關問題