Question

我对基本HTML DOM元素的研究说明了任何DOM元素的“样式”属性（来自http://www.w3schools.com/jsref/dom_obj_all.asp）：

   "style --    Sets or returns the style attribute of an element"

'label'标签是一个dom元素。因此它具有“风格”属性。正如它在w3schools链接上指出的那样上面，所有dom元素都有'style'属性。

事实上，我在这里设置（内联）标签标签的'style'属性 - 这样可以正常工作：

    <label for="itemImageId" style="color: gray" id="labelForImageUploadID">Item image</label>

标签文字颜色在页面加载时为灰色。

在某种情况下（用户已指示他们已准备好选择要上传的图片） - 我需要通过将上面的初始灰色文本颜色更改为黑色来将上传显示为“已启用”。

我知道我可以使用css类来获取此标签的文本颜色，并使用'className'属性动态改变上面的css类？你敢打赌我做。今晚虽然我拿着这个DOM元素的脚到了火。我只需要一个'style'属性来改变（文本颜色），并且不想只为它添加一个类 - 我在这里尝试的应该根据文档工作。

我想知道为什么我不能使用'style'属性，因为DOM说我可以 - “获取”和“设置”DOM元素的属性。

这里我“设置” - 我的'style'属性 - 这没有 - 标签文字仍为灰色：

    document.getElementById('labelForImageUploadID').style = "color: rgb(0,0,0)";

这也不会将颜色从灰色变为黑色：

    document.getElementById('labelForImageUploadID').style = "color: black";

上面的代码执行（在javascript中）标签已经在页面上可见，并且响应于表单上按钮的onclick事件，标签也是其中的一部分。

是否存在“设置”DOM元素的“样式”属性的错误？根据{{3}}，

   "HTMLElement Object

    The following properties, and methods can be used on all HTML elements."

        (other properties here.....)
   "style --    Sets or returns the style attribute of an element"
       (still other properties here......)

那么为什么我不能在上面的代码中更改元素的'style'属性呢？

Answer 1

^{在2017年查看此答案后，设置整个样式字符串的原始示例可以正常工作。我不知道问题是什么，
但下面的例子仍然是有效的方法。}

使用JavaScript设置样式通常遵循以下格式：

document.getElementById("abc").style.[css property name in camel case] = "[value]";

如果使用jQuery，它会变得更清晰：

// find all elements with the tag name "bar" that are direct 
// descendants of an element with the class name "foo"
$(".foo > BAR").css("color", "red");

// set multiple properties
$(".foo > BAR").css({ color: "red", "background-color": "beige" });

Answer 2

试试这个：

label { color: red; }
label span { color: blue; }

<label> your Labaet <span>Text</span> </label>

无法更改<label>文字颜色</label>

2 个答案: