Question

我的代码出了什么问题？我试图在单击按钮时更改两个框的大小：

<script type="text/javaScript> 
    document.getElementById("makesmaller").onclick=function(){
        document.getElementById("bigbox").style.size="100px".color="green";
    }

    document.getElementById("makebig").onclick=function(){
        document.getElementById("littlebox").style.size="1000px".color="red";
    }
</script>

Answer 1

首先，没有＆＃34;尺寸＆＃34;式

有宽度，高度，fontSize，我确定有其他人，但没有尺寸

这里有什么可以做你想要的。

document.getElementById("makesmaller").onclick=function(){
     var el = document.getElementById("bigbox");
     el.style.height="100px";
     el.style.width="100px";
     el.style.color="green";
}

同样适用于制作部分

Answer 2

CSS中没有size属性的文档。您最有可能寻找的是CSS width和height属性。

此类操作的Javascript语法将驻留在以下代码中：

var element = [HTML Element]; // Get HTML Element

var width, height; // Set width and height variables

element.style.width = width;
element.style.height = height;

要在调用onclick事件时执行此操作，结果代码将按以下行写入：

// Listen for click event
element.addEventListener("click",
    function() {
        element.style.width = width; // Set new width
        element.style.height = height; // Set new height
    });

要完全按照您的目标行事，您的代码将基于以下逻辑：

// Get buttons
var bigger = [HTML Element], 
    smaller = [HTML Element];

// Set size variables
var bigger_width, bigger_height;
var smaller_width, smaller_height;

// Add handlers
bigger.addEventListener("click",
    function() {
        element.style.width = bigger_width;
        element.style.height = bigger_height;
    });

smaller.addEventListener("click",
    function() [
        element.style.width = smaller_width;
        element.style.height = smaller_height;
    });

或者，可以使用element.onclick = function() { }语法。

Answer 3

使用width，height和cssText。 CSS中没有名为“size”的属性。通过使用cssText，您可以在不使用jQuery的情况下更改多个属性（例如element.css({"height": "100px", "width": "100px"})
JSFiddle：https://jsfiddle.net/2as3get3/2/

<script type="text/javaScript>
  document.getElementById("makesmaller").onclick = function(){
  document.getElementById("littlebox").style.cssText = "width: 100px; height: 100px; color: green;";
}
  document.getElementById("makebig").onclick  = function(){
  document.getElementById("littlebox").style.cssText = "width: 1000px;  height: 1000px; color:red; ";
};
  </script>

如何在javascript中更改样式

3 个答案: