最大化一個div並更改其字體大小

Question

我在我的html中有2個div，我想通過onclick增加大小，但fontSize不會更改。

代碼：

function changeSize(id, weight, height) 
 
{ 
 
with (document) 
 
{ 
 
\t if (getElementById(id).style.width = '240px'){ 
 
\t \t getElementById(id).style.width = weight + 'px'; 
 
\t \t getElementById(id).style.height = height + 'px'; 
 
\t \t getElementById(id).style.fontSize = '30px'; 
 
\t } \t 
 
\t else { 
 
\t \t getElementById(id).style.width ='240px'; 
 
\t \t getElementById(id).style.height ='300px'; 
 
\t \t getElementById(id).style.fontSize = '18px'; 
 

 
\t } 
 
} 
 
}

.kaesten{ 
 
\t width:240px; 
 
\t height:300px; 
 
\t background-color:darkgrey; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t text-shadow:0px 0px 3px #000; 
 
\t border: 5px solid #F0F8ff; 
 
\t vertical-align:top; 
 
\t text-shadow: 3px 3px 4px #777; 
 
\t float:left; 
 
\t margin-left:30px; 
 
}

<div id="box1" class="kaesten" onclick="maxi('box1', 600, 600); return false;"> 
 
test1 
 

 
</div> 
 

 
<div id="box2" class="kaesten"> 
 
test2 
 
</div>

問：我怎樣才能改變fontSize的？如何通過第二次點擊將div大小再次改變爲原始大小？

Answer 1

您犯了一個錯字。 JavaScript中的屬性和方法是區分大小寫的。該方法是getElementById，而不是getElementByID。

假設只內嵌樣式是在元素上都可以在功能上面添加的那些，你可以使用以下方法來去除風格和「復位」的元素：

function changeSize(id, weight, height){ 
 
    var elem = document.getElementById(id); 
 
    if(elem.getAttribute('style')){ 
 
     elem.removeAttribute('style'); 
 
    } else { 
 
     elem.style.width = weight + 'px'; 
 
     elem.style.height = height + 'px'; 
 
     elem.style.fontSize = '30px'; 
 
    } 
 
} 
 

 
var elems = document.getElementsByClassName('kaesten'); 
 
for(var i = 0; i < elems.length; i++){ 
 
    elems[i].onclick = function(){ 
 
     changeSize(this.id, 600, 600); 
 
    } 
 
}

<div id="box1" class="kaesten">test1</div> 
 
<div id="box2" class="kaesten">test2</div>

更好的辦法是簡單地將元素作爲參考傳遞給函數，而不是傳遞元素id並且必須再次查詢文檔。

Answer 2

在這種情況下，你可以做的最好的事情是使用2個CSS類，並用JavaScript切換。每個點擊就可以檢查它是否具有一定的階級，然後切換這些

.normal{ 
    width:240px; 
    height:300px; 
    background-color:darkgrey; 
    background-position:center; 
    background-repeat:no-repeat; 
    text-shadow:0px 0px 3px #000; 
    border: 5px solid #F0F8ff; 
    vertical-align:top; 
    text-shadow: 3px 3px 4px #777; 
    float:left; 
    margin-left:30px; 
} 

.maximize{ 
    width:4800px; 
    height:600px; 
    font-size:30px; 
    background-color:darkgrey; 
    background-position:center; 
    background-repeat:no-repeat; 
    text-shadow:0px 0px 3px #000; 
    border: 5px solid #F0F8ff; 
    vertical-align:top; 
    text-shadow: 3px 3px 4px #777; 
    float:left; 
    margin-left:30px; 
} 

你可以切換：

var class = document.getElementById("MyElement").className; 
if(class === "normal"){ 
    document.getElementById("MyElement").className = "maximize"; 
} else { 
    document.getElementById("MyElement").className = "normal"; 
} 

Answer 3

錯字錯誤

getElementById(id).style.fontSize = '30' +'px'; 
      ^

請檢查它的工作

function maxi(id, weight, height) 
 
{ 
 
\t with (document) 
 
\t { 
 
\t \t getElementById(id).style.width = weight + 'px'; 
 
\t \t getElementById(id).style.height = height + 'px'; 
 
\t \t getElementById(id).style.fontSize = '30' +'px'; 
 
\t \t 
 
\t } 
 
}

.kaesten{ 
 
\t width:240px; 
 
\t height:300px; 
 
\t background-color:darkgrey; 
 
\t background-position:center; 
 
\t background-repeat:no-repeat; 
 
\t text-shadow:0px 0px 3px #000; 
 
\t border: 5px solid #F0F8ff; 
 
\t vertical-align:top; 
 
\t text-shadow: 3px 3px 4px #777; 
 
\t float:left; 
 
\t margin-left:30px; 
 
}

<div id="box1" class="kaesten" onclick="maxi('box1', 600, 600); return false;"> 
 
test1 
 

 
</div> 
 

 
<div id="box2" class="kaesten"> 
 
test2 
 
</div>