Название в значительной степени суммирует его.
Внешняя таблица стилей имеет следующий код:
td.EvenRow a{
display: none !important;
}
Я попытался использовать:
element.style.display = "inline";
и
element.style.display = "inline !important";
но не работает. Можно ли переопределить важный стиль с помощью javascript.
Это для расширения greasemonkey, если это имеет значение.
Я считаю, что единственный способ сделать это - добавить стиль как новое объявление CSS с суффиксом "! important". Самый простой способ сделать это - добавить новый <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;}')
Правила, добавленные с помощью вышеупомянутого метода, будут (если вы используете важный суффикс!) переопределите другой ранее установленный стиль. Если вы не используете суффикс, тогда обязательно учитывайте такие понятия, как " specificity.
Есть несколько простых однострочных линий, которые вы можете использовать для этого.
1) Задайте для элемента атрибут "style":
element.setAttribute('style', 'display:inline !important');
или...
2) Измените свойство cssText объекта style:
element.style.cssText = 'display:inline !important';
Либо выполнит задание.
===
BTW - если вы хотите использовать полезный инструмент для управления правилами !important в элементах, я написал плагин jQuery под названием "important": http://github.com/premasagar/important
element.style имеет метод setProperty, который может принимать приоритет в качестве третьего параметра:
element.style.setProperty("display", "inline", "important")
Он не работал в старых IE, но в текущих браузерах это должно быть хорошо.
Ты можешь использовать:
element.style.setProperty("display", "inline", "important");
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
Основываясь на превосходном ответе @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] = '', потому что он принимает только camelCase в FireFox.
Суб >
Лучший метод, который я только что обнаружил: старайтесь быть более конкретным, чем CSS страницы с вашими селекторами. Я просто должен был сделать это сегодня, и это работает как шарм! Дополнительная информация на сайте W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity
Если вы хотите обновить/добавить один стиль в атрибуте стиля DOM Element, вы можете использовать эту функцию:
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 + ";";
}
}
style.cssText поддерживается для всех основных браузеров.
Пример использования примера:
var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");
Если все, что вы делаете, добавляет css на страницу, тогда я предлагаю вам использовать стильный аддон и написать пользовательский стиль вместо пользователя script, потому что пользовательский стиль более эффективен и уместен.
Смотрите эту страницу с информацией о том, как создать пользовательский стиль
https://developer.mozilla.org/en-US/docs/Web/CSS/initial
использовать начальное свойство в css3
<p style="color:red!important">
this text is red
<em style="color:initial">
this text is in the initial color (e.g. black)
</em>
this is red again
</p>
https://jsfiddle.net/xk6Ut/256/
Один из вариантов переопределения CSS-класса в JavaScript - это идентификатор элемента стиля, чтобы мы могли обновить класс CSS
function writeStyles(styleName, cssText) {
var styleElement = document.getElementById(styleName);
if (styleElement) document.getElementsByTagName('head')[0].removeChild(
styleElement);
styleElement = document.createElement('style');
styleElement.type = 'text/css';
styleElement.id = styleName;
styleElement.innerHTML = cssText;
document.getElementsByTagName('head')[0].appendChild(styleElement);
}
..
var cssText = '.testDIV{ height:' + height + 'px !important; }';
writeStyles('styles_js', cssText)
Вместо внедрения стиля, если вы внедрите класс (например, "show") через java-скрипт, он будет работать. Но здесь вам нужно CSS, как показано ниже. добавленное правило класса CSS должно быть ниже вашего исходного правила.
td.EvenRow a{
display: none !important;
}
td.EvenRow a.show{
display: block !important;
}
Ниже приведен фрагмент кода для установки важного параметра атрибута стиля с помощью jquery.
$.fn.setFixedStyle = function(styles){
var s = $(this).attr("style");
s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
s = s.substring(0,s.length-1)+"}";
s = s.replace(/,/g,"\",\"").replace(/{/g,"{\"").replace(/}/g,"\"}").replace(/:/g,"\":\"");
var stOb = JSON.parse(s),st;
if(!styles){
$.each(stOb,function(k,v){
stOb[k] +=" !important";
});
}
else{
$.each(styles,function(k,v){
if(v.length>0){
stOb[k] = v+" !important";
}else{
stOb[k] += " !important";
}
});
}
var ns = JSON.stringify(stOb);
$(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};
Использование довольно просто. Просто передайте объект, содержащий все атрибуты, которые вы хотите установить как важные.
$("#i1").setFixedStyle({"width":"50px","height":""});
Есть два дополнительных параметра.
1.Чтобы добавить важный параметр к уже существующему атрибуту стиля, пропустите пустую строку.
2. Чтобы добавить важный параметр для всех атрибутов, которые не передают ничего. Он будет устанавливать все атрибуты как важные.
Вот он живой в действии. http://codepen.io/agaase/pen/nkvjr
Самый простой способ использовать метод setProperty:
document.getElementById("...").style.setProperty("display", "inline", "important");