Question

我正确使用setAttribute吗？点击＆＃34; blue＆＃34;按钮，框没有颜色，但似乎仍然将高度设置为150px。我在这做错了什么？

＆＃13;

document.getElementById("button1").addEventListener("click", function() {
  document.getElementById("box").style.height = "250px";
});



document.getElementById("button2").addEventListener("click", function() {
  document.getElementById("box").style.backgroundColor = "blue";
});


document.getElementById("button4").addEventListener("click", function() {
  document.getElementById("box").setAttribute("style", "backgroundColor: orange; height:150px");
});

＆＃13;

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset</button>

＆＃13;

Answer 1

请记住，setAttribute会覆盖所有其他样式，并且总是尝试使用样式对象中的属性，就像在其他点击事件中一样。

你快到了

如果您仍尝试使用setAttribute进行学习，则问题是本机css中没有backgroundColor。您只有background-color。改变它，它的工作原理。

＆＃13;

document.getElementById("button1").addEventListener("click", function(){
    document.getElementById("box").style.height="250px";
});



document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor="blue";
});


document.getElementById("button4").addEventListener("click", function(){
  document.getElementById("box").setAttribute("style","background-color:orange; height:250px");
  });

＆＃13;

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

    <button id="button1">Grow</button>
    <button id="button2">Blue</button>
    <button id="button3">Fade</button>
    <button id="button4">Reset</button>

＆＃13;

不要与javascript属性和本机css属性混淆。 Javascript表示带有style element URL robotFile = new URL("https://moz.com/blog-sitemap.xml"); //read robot.txt line by line Scanner robotScanner = new Scanner(robotFile.openStream()); while (robotScanner.hasNextLine()) { System.out.println(robotScanner.nextLine()); }对象的camelcase字母的css属性。

Answer 2

您的错误是您使用的是backgroundColor而不是background-color

按钮Reset1是编写函数的正确方法，但它覆盖了所有样式（例如width，padding，margin ...）< / p>

所以我在点击按钮Reset 2时编写了另一个函数，它必须按照您的要求进行操作。但是你必须尝试它，而不是点击Reset 1，因为它将删除所有其他样式

＆＃13;

document.getElementById("button1").addEventListener("click", function(){
    document.getElementById("box").style.height="250px";
});

document.getElementById("button2").addEventListener("click", function(){
    document.getElementById("box").style.backgroundColor="blue";
});

document.getElementById("button4").addEventListener("click", function(){
    document.getElementById("box").setAttribute("style","background-color:orange; height:150px");
});

document.getElementById("button5").addEventListener("click", function(){
    document.getElementById("box").style.height="150px";
    document.getElementById("box").style.backgroundColor="orange";
});

＆＃13;

<div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

<button id="button1">Grow</button>
<button id="button2">Blue</button>
<button id="button3">Fade</button>
<button id="button4">Reset 1</button>
<button id="button5">Reset 2</button>

＆＃13;

Answer 3

您可以像以前一样使用document.getElementById("button4").addEventListener("click", function(){ document.getElementById("box").style.backgroundColor="orange"; document.getElementById("box").style.height="150px" });。

{{1}}

通过元素的setAttribute函数设置样式

3 个答案:

你快到了