如何在javascript函數中添加和刪除css類
[英]how to add and remove css class in javascript function
問題描述
我已經驗證了電子郵件文本框。 當它是第一次焦點時，文本框邊框的邊框將為綠色。 如果我們輸入了無效的郵件ID，它將提醒用戶輸入正確的郵件ID。 現在光標將聚焦於文本框，這一次我希望文本框的邊框應為紅色，邊框寬度應為3px。 輸入正確的有效ID后，邊框就會消失。
這是我的密碼
<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">
function Validate() {
var str=document.forms["register"]["requiredEMAIL"].value;
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (!filter.test(str))
{
alert("Please input a valid email address!");
document.forms["register"]["requiredEMAIL"].focus();
return false;
}
}
</script>
<style>
#mail{
font-size:14px;
min-width:250px;
border-width:2px;
border-color:#cccccc;
border-style:solid;
padding:5px;
border-radius:5px;
box-shadow: 1px 0px 13px 0px rgba(42,42,42,.24); }
#mail:focus{border-color:#63C6AE; border-width:3px; }
</style>
</head>
<body>
<form method="post" action="abcd.abc.abc" onSubmit="return Validate(this)" name="register">
<input type="email" name="requiredEMAIL" id="mail" >
<input type="submit">
</form>
</body>
</html>
6 個解決方案
解決方案1
2 2015-06-30 05:52:56
要將類添加到元素：
document.getElementById("MyElement").className = "MyClass";
要將附加類添加到元素：
document.getElementById("MyElement").className += " MyClass";
要在元素中刪除單個類而又不影響其他潛在類，則需要簡單的正則表達式替換：
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\\s)MyClass(?!\\S)/g , '' ) /* code wrapped for readability - above is all one statement */
請參閱與此相關的案例
解決方案2
2 已采納 2015-06-30 06:06:26
添加和刪除css類，
<script type="text/javascript">
$("#addClass").click(function () {
$('#para1').addClass('highlight');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
</script>
解決方案3
0 2015-06-30 05:52:03
查看jQuery addClass（）方法和jQuery removeClass（）方法
希望能幫助到你。
解決方案4
0 2015-06-30 06:01:56
將此添加到您的js $("#mail").addClass("intro"); 成功並導入jquery庫
在你的CSS添加
.intro
{
border:red;
border-width:3px;
}
解決方案5
0 2015-06-30 06:18:04
<script type="text/javascript" language="javascript">
function Validate() {
var str=document.forms["register"]["requiredEMAIL"].value;
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i
if (!filter.test(str))
{
alert("Please input a valid email address!");
document.forms["register"]["requiredEMAIL"].focus();
document.getElementById("mail").style.border="3px solid red "; // add this line to add red border on error
return false;
}
else {
document.getElementById("mail").style.border="none"; // add this line to remove border on success
}
}
</script>
解決方案6
0 2015-06-30 07:14:04
嗨，Vijay，您可以使用此電子郵件驗證表單，它非常易於實現
jQuery.validator.setDefaults({ debug: true, success: "valid" }); $( "#myform" ).validate({ rules: { field: { required: true, email: true } } });
#field{margin-left:.5em;float:left;} #field,label{float:left;font-family:Arial,Helvetica,sans-serif;font-size:small;} br{clear:both;}input{border:1px solid black;margin-bottom:.5em;} input.error{border:1px solid red;} label.error{background:url('http://jqueryvalidation.org/files/demo/images/unchecked.gif') no-repeat;padding-left:16px;margin-left:.3em;} label.valid{background:url('http://jqueryvalidation.org/files/demo/images/checked.gif') no-repeat;display:block;width:16px;height:16px;}
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"></script> <script src="http://jqueryvalidation.org/files/dist/additional-methods.min.js"></script> <form id="myform"> <label for="field">Required, email: </label> <input class="left" id="field" name="field"> <br/> <input type="submit" value="Validate!"> </form>
謝謝
javascript：刪除/添加類函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.