¿Por qué style.textDecoration contiene un valor rgb?
style = window.getComputedStyle(document.getElementById('gettextDecorationfrom')); weight = style.textDecoration; document.getElementById("results").innerText = style.textDecoration; .myclass { text-decoration:initial; } <div id="gettextDecorationfrom" class="myclass"> Test </div> <hr> Result: <div id="results"></div>Esperaba que "inicial" fuera el resultado de esto, pero no esperaba que apareciera un valor rgb.
Si se establece el subrayado, el valor rgb también está allí, pero solo con 'subrayado' agregado, no entiendo por qué rgb está allí en primer lugar.
style = window.getComputedStyle(document.getElementById('gettextDecorationfrom')); weight = style.textDecoration; document.getElementById("results").innerText = style.textDecoration; .myclass { text-decoration:underline; } <div id="gettextDecorationfrom" class="myclass"> Test </div> <hr> Result: <div id="results"></div>¿Puedo eliminar el valor rgb de la decoración de texto sin importar cuál sea el valor?
text-decoration tiene un color predeterminado, generalmente el de su navegador (negro)
Puede recortar la parte rgb de la cadena con .replace y un poco de expresiones regulares.
Esto eliminará la parte rgb independientemente de los valores rgb (xxx), como querías.
¡PERO! Como resultado, no podrá obtener initial , porque initial reemplaza al valor predeterminado none en text-decoration
style = window.getComputedStyle(document.getElementById('gettextDecorationfrom')); weight = style.textDecoration; text = weight.replace(/ ?rgb\(([^;]*)\)/gm, ''); document.getElementById("results").innerText = text; .myclass { text-decoration:underline; } <div id="gettextDecorationfrom" class="myclass"> Test </div> <hr> Result: <div id="results"></div>Según los documentos, la decoración de texto es una propiedad abreviada. Consulte: https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration
Eso significa que contiene múltiples propiedades. Específicamente, contiene text-decoration-line , text-decoration-color , text-decoration-style y text-decoration-thickness . Es por eso que ve el valor RGB, porque incluye el color en la propiedad text-decoration .
Si solo desea la propiedad text-decoration-line, entonces puede usar textDecorationLine , pero eso nunca le dará initial como mencionó en su primer ejemplo.
Eso es porque getComputedStyle no devuelve lo que está en el CSS; devuelve el estilo que realmente termina siendo aplicado al elemento. Por eso se llama estilo computado . initial no es un estilo calculado, es un valor que le indica al navegador que calcule el estilo utilizando el estilo inicial, que para la línea de decoración de texto es ninguno, como puede ver aquí: https://developer.mozilla. org/en-US/docs/Web/CSS/text-decoration-line#formal_definition
Si desea obtener esa initial , tendrá que inspeccionar la hoja de estilo. Ver: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet
Usando una combinación de ambas respuestas, pude obtener lo que necesitaba. La respuesta de Instance Hunter tenía el JavaScript textDecorationLine que faltaba, lo que me permitió usar la respuesta de FHJTDSDG sin la expresión regular.
ejemplo de trabajo..
updateresult() function toggleunderline() { if (weight === "none") { document.getElementById("gettextDecorationfrom").style.textDecorationLine = "underline" updateresult() } else { document.getElementById("gettextDecorationfrom").style.textDecorationLine = "initial" updateresult() } } function updateresult(){ style = window.getComputedStyle(document.getElementById('gettextDecorationfrom')); weight = style.textDecorationLine; document.getElementById("results").innerText = weight; } .myclass { text-decoration:initial; } <button onclick="toggleunderline()"> Toggle underline </button> <div id="gettextDecorationfrom" class="myclass"> Test </div> <hr> Result: <div id="results"></div>