Nagaraju_Y
<div id="testDiv">
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
</div>
<button onclick="myFunction()">Try it</button>
<style>
.example {
background-color: green !important;
}
</style>
<script>
function myFunction() {
var x = document.querySelectorAll("#testDiv p.example");
x[0].style.backgroundColor = "red";
}
</script>A partir del código anterior, ¿cómo puedo anular la propiedad css con !important en la propiedad de estilo anterior de mi código JS definido en la etiqueta del script?
Nota: Tenemos algunas aplicaciones internas que tienen sus estilos declarados importantes
Văn Quyết
Prueba este código usando CSSStyleDeclaration.setProperty():
function myFunction() {
var x = document.querySelectorAll("#testDiv p.example");
x[0].style.setProperty("background-color", "red", "important");
}
-
@ Nagaraju_007 Sin embargo, este solo sobrescribirá la propiedad especificada, donde la solución mía y de Pete podría sobrescribir todo el estilo, así que +1 de mí … y pruébalo correctamente
– Asones
19 de julio de 2016 a las 9:45
-
Obtuve este @LGSon, si queremos establecer una sola propiedad, entonces esto fue bueno y si queremos establecer algún grupo de propiedades, su código es bueno …
– Nagaraju_Y
21 de julio de 2016 a las 6:47
Aquí hay 2 scripts diferentes, uno apunta a la propiedad CSS de un elemento y el otro a su estilo.
<div id="testDiv">
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
</div>
<p>Click the button to add a background color to the first element in the document with class="example" (index 0).</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try it 2</button>
<p><strong>Note:</strong> The querySelectorAll() method is not supported in Internet Explorer 8 and earlier versions.</p>
<script>
function myFunction() {
var x = document.querySelectorAll("#testDiv p.example");
x[0].style.backgroundColor = "red";
}
function myFunction2() {
var x = document.querySelectorAll("#testDiv p.example");
x[0].style = "background-color: red !important";
}
</script>Para anular un estilo importante en la hoja de estilo, debe establecer el atributo de estilo con js:
function myFunction() {
var x = document.querySelectorAll("#testDiv p.example");
x[0].setAttribute('style', 'background-color: red !important');
}p.example {
background-color: blue !important;
}<div id="testDiv">
<h2 class="example">A heading with class="example"</h2>
<p class="example">A paragraph with class="example".</p>
</div>
<button onclick="myFunction()">Try it</button>
Lo hace
style.backgroundColor = "red !important"¿no trabajo?– evoluciónxbox
19 de julio de 2016 a las 9:16
No.. cuando mantuve !importante que css no está funcionando porque, ese no es un formato correcto.
– Nagaraju_Y
19 de julio de 2016 a las 9:22
En mi aplicación no puedo usar estilos por archivos .css, así que tengo que usar código JavaScript para anular el código existente. El código que di arriba es jst para fines de referencia
– Nagaraju_Y
19 de julio de 2016 a las 9:24