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]意味着descendant selector。

因此，添加类时，必须将其添加到输入组件的父级。

<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类应用于该父级，或者应用错误类直接使用上面＃2删除框阴影的每个元素。

此外，只需将css属性设置为“none”即可删除盒阴影。

className（）css未显示样式

3 个答案: