Question

HTML

<h1>Changing the Style</h1>
<p>JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="openMe()">Open!</button>
<button type="button" onclick="closeMe()">Close!</button>

<p id="demo">Extra details...You can open and close this paragraph using the buttons above.</p>

CSS

.close {
    display: none;
}
.open {
    display: block;
}

button {
    width:150px;
    background-color: #00CCEE;
    margin-left:15px;
    font-size:120%;
}

#demo {
    color:white;
    background-color: #7F7F7F;
    padding:10px;
    font-size:120%
}

JAVASCRIPT

function closeMe(){
    x=document.getElementById("demo");
    x.className="close";
}

function openMe(){
    x=document.getElementById("demo");
    x.className="open";
}

我可以在Javascript中使用Like x.IdName= "close";吗？

到目前为止，我知道有两种方法可以使用Javascript更改样式属性。

x = document.getElementById("demo");

直接例如..（x.style.backgroundColor ="red";
按类名称，例如..（x.className="abc";）

使用我们使用的类名：
```
x = document.getElementById("demo");
x.className="abc";
```
我的问题：

我可以使用Id更改使用className的样式属性吗？如果是，请显示。

我可以打电话给＆＃34; x＆＃34; {x=document.getElementById("demo");}变量？

Answer 1

使用JavaScript修改元素样式有三种方法：

修改内联样式。这由元素上的.style属性和HTML标记上的style属性表示。
修改元素的任何功能，以便样式表中规则集上的选择器开始或停止匹配。例如.foo { ... }将匹配foo类成员的元素，因此如果您修改.className属性以添加或删除该类中的元素，您将更改适用于该类的元素。您可以更改其他因素，例如id（通常不是逻辑构思），任意属性或selector存在的任何其他因素。
修改the rulesets in the stylesheet本身。

Answer 2

您已经修改了示例中元素的style属性。

x.style.backgroundColor= "red";

这是修改属性的样式。第二个示例是编辑元素类名。我假设您的意思是，如果您可以使用ID将元素应用于元素？

如果是这种情况，您可以使用类似于

的类选择器设置元素样式

.className {
    /* Some styles */
}

或使用id选择器

#demo {
    /* Other styles */
}

上面的两个例子要么需要进入自己的样式表，要么进入<style></style>元素的HTML内部。

Answer 3

document.getElementById选择具有特定ID的元素。如果要按类名选择元素，可以使用ie document.querySelector('.your-class')选择包含您的class className的节点。

当你写作

x = document.getElementById("demo");
x.style.backgroundColor ="red"

您正在使用Id设置样式以选择节点。

在行x = document.getElementById("demo");中，x是变量。运行此行后，此变量的值将设置为document.getElementById("demo");返回的任何函数。在这种情况下，它指向具有Id属性“demo”的DOM元素。

在javascript中更改样式属性使用className

3 个答案: