最大化 div 并更改其字体大小

Question

我的 html 中有 2 个 div，我想通过单击增加大小，但字体大小没有改变。

代码：

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

 }
}
}

.kaesten{
 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;
}

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

</div>

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

问：如何更改字体大小？以及如何通过第二次点击再次将 div 大小更改为原始大小？

Answer 1

你打错了。 JavaScript 中的属性和方法区分大小写。方法是getElementById，不是getElementByID.

假设元素上唯一的内联样式是您在上面的函数中添加的样式，您可以使用以下方法删除样式和 'reset' 元素：

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 classes 并将它们切换为 javascript。每次点击你都可以检查它是否有某个class然后切换那些

.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)
{
 with (document)
 {
  getElementById(id).style.width = weight + 'px';
  getElementById(id).style.height = height + 'px';
  getElementById(id).style.fontSize = '30' +'px';
  
 }
}

.kaesten{
 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;
}

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

</div>

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

最大化 div 并更改其字体大小

maximize a div & change its fontSize

html

javascript

css

font-size

maximize