jquery，将css属性设置为空字符串

Question

我目前正在研究jquery css()方法。

在.css()文档中，它声明了

但是，我并不完全确定用于取消之前执行的任何样式修改的含义。但是，它不会删除在样式表或元素中使用CSS规则应用的样式。。

所以我查了MDN page on HTMLElement.style，其中说明了

我还尝试将HTMLElement.style的一个属性设置为""（即空字符串）

所以似乎通过将color的{​​{1}}属性设置为d.style，我删除了""属性的值，color属性为未从color中删除。

但文档的含义是什么但是，它不会删除在样式表或元素中使用CSS规则应用的样式。

Answer 1

.css() method 可以删除内嵌样式（由style=""表示）：

var target = document.getElementById('target');
$('#target').css('color', '');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target" style="color: red">Target</div>

但不已在CSS样式表中定义的样式规则：

var target = document.getElementById('target');
$('#target').css('color', '');

#target {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">Target</div>

它也不适用于在同一文件中编写的<style>标记内的样式：

var target = document.getElementById('target');
$('#target').css('color', '');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">Target</div>

<style>
#target {
  color: red;
}
</style>

这是因为 CSSStyleDeclaration object 是 Window.GetComputedStyle() 的只读界面，用于检索样式表。

  

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后，报告元素的所有CSS属性的值。

Element.style 会返回CSSStyleDeclaration个对象，也是只读对象：

  

不应通过将字符串直接分配给样式属性来设置样式（如elt.style = "color: blue;"中所示），因为它被认为是只读的，因为style属性返回CSSStyleDeclaration对象，该对象也是只读的。

jQuery的 css() method 本身会尝试修改样式属性，因此它只能更新内联样式：

  

当使用.css()作为setter时，jQuery会修改元素的style属性。 [...]将样式属性的值设置为空字符串 - 例如$( "#mydiv" ).css( "color", "" ) - 如果元素已经直接应用，则从元素中删除该属性，无论是在HTML样式属性中，还是通过jQuery的.css（）方法，或者通过直接DOM操作样式属性。 [...]但是，它不会删除在样式表或元素中使用CSS规则应用的样式。