一些表單中的輸入框輸入之后會進行判斷,會在input框之后以√×來表示判斷的結果,下面我使用偽元素來簡單的實現這個功能。代碼如下:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>使用偽元素簡單實現input框后的√×</title> <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.js"></script> <style type="text/CSS"> body { font-family: "微軟雅黑"; font-size: 20px; color: #000; } label { height: 24px;line-height: 24px; } input { height: 24px;line-height: 24px; } .true:after { display: inline-block; content: '√'; width: 20px; height: 20px; vertical-align: middle; line-height: 24px; color: green; } .false:after { display: inline-block; content: '×'; width: 20px; height: 20px; vertical-align: middle; line-height: 24px; color: green; } </style></head><body><label id="inputBox"><input type="text" name="user" id="input"></label><script>$("#input").blur(function(){ if($(this).val() == "對"){ $("#inputBox").removeClass("false").addClass("true"); }else if($(this).val() == "錯"){ $("#inputBox").removeClass("true").addClass("false"); }});</script></body></html>使用js或者jQuery好像獲取不到偽元素,我試了幾種方法都顯示undefined,至于原因我看網上說的是偽元素不是Dom節點,所以是獲取不到的。(我用的jQuery版本是1.11.3,其他版本沒有試)。 最后是采用加減class類名來實現的,將兩個狀態下的偽元素綁定在兩個類名之后,在不同的判斷結果時候只需要添加或刪除相應的class類名即可。
新聞熱點
疑難解答