jQuery，将css属性设置为空字符串 [英] jquery, setting css property to empty string

问题描述

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

I'm currently studying the jquery css() method.

在 .css()文档中，声明

但是，我不确定他们用来取消您先前执行的任何样式修改的含义.但是，它不会删除样式表或元素中已应用CSS规则的样式..

所以我查找了 HTMLElement.style上的MDN页面，其中指出

So I looked up MDN page on HTMLElement.style, which states

我还通过将HTMLElement.style的一个属性设置为""(即空字符串)来进行实验

I also experiment by setting one of the property of HTMLElement.style to "" (i.e. an empty string)

因此，似乎通过将d.style的color属性设置为""，我已经删除了color属性的值，并且没有将color属性从d.style中删除.

So it seems that by setting color property of d.style to "", I have removed the value of color property, and the color property was not removed from d.style.

但是文档的含义是，但是，它不会删除样式表或元素中已应用CSS规则的样式.

推荐答案

.css()方法 可以删除内联样式(用style=""表示):

The .css() method can remove inline styles (denoted by 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样式表中定义的不是样式规则:

But not styling rules that have been defined in a CSS stylesheet:

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>标签内部进行样式设置也不起作用:

Nor will it work for styling inside <style> tags written in the same file:

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对象 是 只读接口. > Window.GetComputedStyle() ，用于检索样式表.

This is because the CSSStyleDeclaration object is a read-only interface to Window.GetComputedStyle(), which is used to retrieve the stylesheets.

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

The Window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain.

Element.style 返回CSSStyleDeclaration对象，并且也是只读的:

Element.style returns a CSSStyleDeclaration object, and is also read-only:

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

Styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;"), since it is considered read-only, as the style attribute returns a CSSStyleDeclaration object which is also read-only.

jQuery的 css()方法 本身试图修改样式属性，因此它只能更新内联样式:

jQuery's css() method itself attempts to modify the style property, and thus it can only update inline styles:

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

When using .css() as a setter, jQuery modifies the element's style property. [ ... ] Setting the value of a style property to an empty string — e.g. $( "#mydiv" ).css( "color", "" ) — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. [ ... ] It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element.

这篇关于jQuery，将css属性设置为空字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！