Как установить встроенный CSS элемента по умолчанию с помощью javascript?
У меня есть простая функция, в которой я меняю стиль текста по умолчанию, когда установлен флажок, и меняю стиль обратно на стиль по умолчанию, когда флажок не установлен.
terms.style = ""; должен сбросить стиль до значений по умолчанию, но по некоторым причинам этого не происходит, и я совершенно не понимаю, почему. Я знаю, что область else выполняется, когда флажок не установлен, так как я тестировал его, вручную вводя другой стиль.
const form = document.getElementById('form');
const checkBox = form.querySelector('input[name=termsCheckBox]');
checkBox.addEventListener('click', function(){
const terms = document.getElementById('termsText');
if (checkBox.checked){
terms.style = "color: black; font-weight: normal";
} else {
terms.style = "";
}
});//end of function
element.style - это Object только для чтения. Либо используйте element.setAttribute('style', 'color: black; font-weight: normal'), либо используйте element.style.cssText = 'color: black; font-weight: normal'.
К сожалению, ни один из них не помогает.
Есть ли у вашего элемента какой-то CSS в атрибуте style, который вы хотите вернуть по умолчанию?
Да, стиль по умолчанию - цвет: красный и шрифт: жирный. Я знаю, что могу вставить эти стили вручную в js, но тогда это было бы неправильно с точки зрения дизайна.
@CalvinNunes Вы не должны изменять код OP
не изменилось ... только добавил HTML, необходимый для воспроизведения минимальный воспроизводимый пример. JS был таким же только с console.info
Вы добавили код из jsfiddle.net/d6rg1v25, в котором я изменил OPs css
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Согласно MDN:
Styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;")
Правильный способ:
checkBox.addEventListener('click', function(){
const terms = document.getElementById('termsText');
if (checkBox.checked){
terms.style.color = "black";
terms.style.fontWeight = "normal";
}else{
terms.style.color = "";
terms.style.fontWeight = "";
}
});
Привет Дмитрий. Я изменил код на ваш, но, к сожалению, стиль все еще не сбрасывается.
Вы можете получить встроенный CSS в атрибуте style элемента, используя getAttribute(), и сохранить его в переменной, а при проверке / снятии флажка вставить и удалить его из атрибута style
var checkBox = document.querySelector('#form input[name=termsCheckBox]'),
terms = document.getElementById('termsText'),
style = terms.getAttribute('style');
checkBox.addEventListener('click', function(){
if (checkBox.checked)
terms.style.cssText = "color:black; font-weight:normal";
else
terms.style.cssText = style;
});<form id = "form">
<input type = "checkbox" name = "termsCheckBox">
<textarea id = "termsText" style = "color:red; font-weight:bold">termsText</textarea>
</form>Почему не просто terms.style = style; в заявлении else?
Ваш код работает jsfiddle.net/d6rg1v25