У меня есть следующий HTML-код:Как переопределить встроенный стиль динамически?
<div title="remove css"style="position:relative;">Remove my style</div>
Я должен удалить position стиль атрибута полностью после загрузки страницы. Я в ситуации, когда я не могу переопределить CSS. Я должен полностью удалить стиль position. Как это возможно?
Вам не нужно использовать jQuery для этой простой задачи, особенно если вы еще не используете его.
Просто поместите встроенный стиль в divs, это переопределит предыдущий CSS.
function overridePosition() {
var divs = document.getElementsByTagName('div'),
len = divs.length,
i = 0;
for (; i < len; i += 1) {
// static is the default value of possition
divs[i].style.position = 'static';
}
}
window.onload = function() {
document.querySelector('button').addEventListener('click', overridePosition);
};div {
position: relative;
left: 50px;
}<button>
Click Me To override position: relative
</button>
<div>
<div title="remove css">Remove my style</div>
<div title="remove css">Remove my style</div>
<div title="remove css">Remove my style</div>
<div title="remove css">Remove my style</div>
</div>Существует способ фактически удалить правило, но я очень, очень рекомендую не делать это таким образом. Это не кросс-браузерное решение, и в долгосрочной перспективе это больше хлопот, тогда это стоит того.
function deletePosition() {
var cssRules = document.styleSheets[0];
// the only reason we know what index the rule is at is because it is the only rule.
var ruleIndex = 0;
if (typeof cssRules.deleteRule == "function") {
cssRules.deleteRule(ruleIndex);
} else if (typeof cssRules.removeRule == "function") {
cssRules.removeRule(ruleIndex);
} else {
// don't know how to remove/delete css rule
}
}
window.onload = function() {
document.querySelector('button').addEventListener('click', deletePosition);
};div {
position: relative;
left: 50px;
}<button>
Click Me To delete css position: relative rule
</button>
<div>
<div title="remove css">Remove my style</div>
<div title="remove css">Remove my style</div>
<div title="remove css">Remove my style</div>
<div title="remove css">Remove my style</div>
</div>сделать это с помощью JQuery, чтобы перезаписать исходное значение
$("#ID").css("rule","newvalue");
ИЛИ создать создать новый класс с правилом oposite Позиционирование по умолчанию для всех элементов статично так как этот
myclass{
position:static!important; //to overwrite anything else
}
затем с JQuery
$("#id").addClass("myclass");
Я имею в виду, что я не хочу переопределять css. я должен удалить полностью. в моем случае, если я удаляю позицию полностью, тогда она работает, иначе если я переопределяю любое другое значение, она не работает –
, тогда попробуйте что-то вроде $ (div) .css («position», «»); он работает с цветовыми значениями, но я думаю, что он мог бы работать и с позиционированием –
нет, он не работает. Он показан в значении свойства. –
Ну, вы можете удалить свойство позиции полностью с помощью JQuery. Код должен быть:
$('div').removeAttr("position");
Разве вы не можете просто установить исходное положение с помощью CSS, а затем документ готов, removeClass с помощью JQuery?
кажется ли это как то, что вы после этого?
Таким образом, вы не можете использовать CSS, чтобы изменить это? Вы можете использовать javascript? – ntgCleaner
Как добавить встроенный css с помощью JavaScript? – jlowcs
мы можем использовать javascript, jquery. html заполняется динамически. поэтому я не могу добавить встроенный стиль вручную. –