className（）CSS樣式未顯示

Question

我試圖在用戶單擊提交后添加樣式。 用戶單擊時，在表單中進行選擇或輸入將刪除該特定的框陰影。

目前，我正在按照以下方法添加樣式。 但是，看來當我執行此方法時，它確實添加了類，但沒有添加樣式本身：

var name = document.getElementById("name");

name.classList.add += " error";

我還嘗試了Jquery方法來添加類，但發生相同的問題：

$("#name").addClass("error");

這是我的樣式：

   /***Box Shadow***/
.shadow {
   -moz-box-shadow:    inset 0 0 10px #D9EDFE !important;
   -webkit-box-shadow: inset 0 0 10px #D9EDFE !important;
   box-shadow:         inset 0 0 10px #D9EDFE !important;
} 
.shadow input[type="text"]:focus,
.shadow input[type="email"]:focus,
.shadow textarea:focus,
.shadow select:focus {
   -moz-box-shadow:    inset 0 0 10px #00FFFF !important;
   -webkit-box-shadow: inset 0 0 10px #00FFFF !important;
   box-shadow:         inset 0 0 10px #00FFFF !important;
   background-color: white !important;
}
.error input[type="text"],
.error input[type="email"],
.error textarea,
.error select {
   -moz-box-shadow:    inset 0 0 10px #000000 !important;
   -webkit-box-shadow: inset 0 0 10px #000000 !important;
   box-shadow:         inset 0 0 10px #000000 !important;
   background-color: white !important;
}

我試圖實現的部分表單添加類：

<input type="text" class="shadow" name="Name" id="name" placeholder="Your Name *" maxlength="50">

以下是功能

function checkForm(){
 //The form is blank
  if(name_value == '' && email_value == '' && info_value == '' && list_value == "") {
    alert("Error");
    document.getElementById("myform").focus();

    return highlightAll();      
  }
}
function highlightAll(){
    var name = document.getElementById("name");
    var name = $("#DropList").val();
    //var email = document.getElementById("email");


        $("#name").addClass("error");
        //name.classList.add += " error";
        email.className += " error";
        //info_value.className += " error";
        //list_value.className += " error";

        return false;
    }

任何幫助，將不勝感激。 真的卡住了為什么它不起作用

Answer 1

在您的CSS中使用<selector>.error

input[type="text"].error,
input[type="email"].error,
textarea.error,
select.error {
   -moz-box-shadow:    inset 0 0 10px #000000 !important;
   -webkit-box-shadow: inset 0 0 10px #000000 !important;
   box-shadow:         inset 0 0 10px #000000 !important;
   background-color: white !important;
}

Answer 2

error和shadow類當前正應用於輸入的父級。 .error input[type=text]表示后代選擇器 。

因此，添加類時，必須將其添加到輸入組件的父級。

<div id="name">
  <input type="text" class="shadow" name="Name" placeholder="Your Name *" maxlength="50">
</div>

另外，添加類的javascript版本很簡單

name.classList.add('error');

Answer 3

（1）您在CSS中使用的語法（例如，“。error textarea”）轉換為“將這種樣式應用於元素類為.error的任何子元素，如果這些子元素是textareas”。

（2）為了將樣式應用於具有特定類的元素（繼續上面的示例），可以使用textarea.error。 這表示“將這種樣式應用於具有類錯誤的元素”。

因此，按照建議，您可以修改html以使每個相關元素成為ID為“ name”的元素的子元素，並使用上述＃1將.error類應用於該父元素，或者將error類直接應用於每個子元素使用上面的＃2可以刪除框陰影的元素。

另外，只需將css屬性設置為“ none”即可刪除陰影。