如何在javascript中更改样式

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

首先，没有“大小”样式

有宽度、高度、字体大小，我确定还有其他的，但没有大小

这可能是你想要的。

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

同样对于 makebig 部分

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;
    });

Answer 3

使用width 、 height和cssText 。 CSS 中没有称为“大小”的属性。 通过使用 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>