标题几乎总结了它。
外部样式表具有以下代码:
td.EvenRow a {
display: none !important;
}
我试过使用:
element.style.display = "inline";
和
element.style.display = "inline !important";
但两者都不起作用。是否可以使用 javascript 覆盖 !important 样式。
这是一个greasemonkey 扩展,如果这有区别的话。
标题几乎总结了它。
外部样式表具有以下代码:
td.EvenRow a {
display: none !important;
}
我试过使用:
element.style.display = "inline";
和
element.style.display = "inline !important";
但两者都不起作用。是否可以使用 javascript 覆盖 !important 样式。
这是一个greasemonkey 扩展,如果这有区别的话。
您可以使用几个简单的单线来执行此操作。
在元素上设置“样式”属性:
element.setAttribute('style', 'display:inline !important');
或者...
修改对象的cssText
属性style
:
element.style.cssText = 'display:inline !important';
要么会做这项工作。
===
我编写了一个名为“重要”的 jQuery 插件来操作!important
元素中的规则,:http : //github.com/premasagar/important
===
编辑:正如评论中所分享的,标准 CSSOM 接口(用于与 CSS 交互的 JavaScript 的 API)提供了setProperty
方法:
element.style.setProperty(propertyName, value, priority);
例如:
document.body.style.setProperty('background-color', 'red', 'important');
element.style
有一个setProperty
方法可以将优先级作为第三个参数:
element.style.setProperty("display", "inline", "important")
它在旧 IE 中不起作用,但在当前浏览器中应该没问题。
我相信唯一的方法是将样式添加为带有 '!important' 后缀的新 CSS 声明。最简单的方法是在文档的头部附加一个新的 <style> 元素:
function addNewStyle(newStyle) {
var styleElement = document.getElementById('styles_js');
if (!styleElement) {
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = 'styles_js';
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
styleElement.appendChild(document.createTextNode(newStyle));
}
addNewStyle('td.EvenRow a {display:inline !important;}')
使用上述方法添加的规则(如果您使用 !important 后缀)将覆盖其他先前设置的样式。如果您不使用后缀,请确保将“特殊性”等概念考虑在内。
以@Premasagar 的出色回答为基础;如果您不想删除所有其他内联样式,请使用此
//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
//remove previously defined property
if (element.style.setProperty)
element.style.setProperty(property, '');
else
element.style.setAttribute(property, '');
//insert the new style with all the old rules
element.setAttribute('style', element.style.cssText +
property + ':' + value + ((important) ? ' !important' : '') + ';');
}
无法使用,removeProperty()
因为它不会删除!important
Chrome中的规则。
无法使用,element.style[property] = ''
因为它在 FireFox 中只接受驼峰式大小写。
如果要在 DOM 元素样式属性中更新/添加单个样式,可以使用此功能:
function setCssTextStyle(el, style, value) {
var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
idx;
if (result) {
idx = result.index + result[0].indexOf(result[1]);
el.style.cssText = el.style.cssText.substring(0, idx) +
style + ": " + value + ";" +
el.style.cssText.substring(idx + result[1].length);
} else {
el.style.cssText += " " + style + ": " + value + ";";
}
}
用例示例:
var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");