js点击div左上角出现对勾选中效果

最新推荐文章于 2024-06-02 20:20:55 发布
Return_KB
最新推荐文章于 2024-06-02 20:20:55 发布
阅读量6.5k
点赞数
分类专栏：前端js
前端js 专栏收录该内容
39 篇文章
订阅专栏
分享一段代码实例，它实现了选中div元素会在元素一角打勾的效果。
代码实例如下:
     
     
      
      
       
       
        
         
            
              01 
             
            
              02 
             
            
              03 
             
            
              04 
             
            
              05 
             
            
              06 
             
            
              07 
             
            
              08 
             
            
              09 
             
            
              10 
             
            
              11 
             
            
              12 
             
            
              13 
             
            
              14 
             
            
              15 
             
            
              16 
             
            
              17 
             
            
              18 
             
            
              19 
             
            
              20 
             
            
              21 
             
            
              22 
             
            
              23 
             
            
              24 
             
            
              25 
             
            
              26 
             
            
              27 
             
            
              28 
             
            
              29 
             
            
              30 
             
            
              31 
             
            
              32 
             
            
              33 
             
            
              34 
             
            
              35 
             
            
              36 
             
            
              37 
             
            
              38 
             
            
              39 
             
            
              40 
             
            
              41 
             
            
              42 
             
            
              43 
             
            
              44 
             
            
              45 
             
            
              46 
             
            
              47 
             
            
              48 
             
            
              49 
             
            
              50 
             
            
              51 
             
            
              52 
             
            
              53 
             
            
              54 
             
            
              55 
             
            
              56 
             
            
              57 
             
            
              58 
             
            
              59 
             
            
              60 
             
            
              61 
             
            
              62 
             
            
              63 
             
            
              64 
             
            
              65 
             
            
              66 
             
             
              
              <!DOCTYPE html> 
              
              
              < 
              html 
              > 
              
              
              < 
              head 
              > 
              
              
              < 
              meta  
              charset 
              = 
              " utf-8" 
              > 
              
              
              < 
              title 
              >点击div左上角出现对勾选中效果</ 
              title 
              > 
              
              
              < 
              style 
              > 
              
              
              #box{ 
              
              
                 
              margin:20px auto; 
              
              
                 
              height:100px; 
              
              
                 
              width:150px; 
              
              
                 
              position:relative; 
              
              
                 
              cursor:pointer; 
              
              
                 
              overflow:hidden; 
              
              
                 
              background-color:#ccc; 
              
              
              } 
              
              
              #box.border { 
              
              
                 
              border:1px dotted red; 
              
              
              } 
              
              
              #box .gou{    
              
              
                 
              position:absolute; 
              
              
                 
              width: 24px; 
              
              
                 
              height: 24px;    
              
              
                 
              right:0px 
              
              
              } 
              
              
              #box .gou.on::after { 
              
              
                 
              border-color: red; 
              
              
              } 
              
              
              #box .gou::after{ 
              
              
                 
              position: absolute; 
              
              
                 
              top: 4px; 
              
              
                 
              left: 8px; 
              
              
                 
              width: 6px; 
              
              
                 
              height: 10px; 
              
              
                 
              border-style: solid; 
              
              
                 
              border-color: #ccc; 
              
              
                 
              border-width: 0 2px 2px 0; 
              
              
                 
              -webkit-transform: rotateZ(45deg); 
              
              
                 
              content: ""; 
              
              
              } 
              
              
              </ 
              style 
              > 
              
              
              < 
              script 
              > 
              
              
              window.onload = function () { 
              
              
                 
              var obox = document.getElementById("box"); 
              
              
                 
              var ospan = obox.getElementsByTagName("span")[0]; 
              
              
                 
              var flag = 0; 
              
              
                 
              obox.onclick = function () { 
              
              
                   
              if (!flag) { 
              
              
                     
              ospan.className = "gou on"; 
              
              
                     
              obox.className = "border"; 
              
              
                     
              flag = 1; 
              
              
                   
              } else { 
              
              
                     
              ospan.className = "gou"; 
              
              
                     
              obox.className = ""; 
              
              
                     
              flag = 0; 
              
              
                   
              } 
              
              
                 
              } 
              
              
              } 
              
              
              </ 
              script 
              > 
              
              
              </ 
              head 
              > 
              
              
              < 
              body 
              > 
              
              
              < 
              div  
              id 
              = 
              "box" 
              > 
              
              
                 
              < 
              span  
              class 
              = 
              "gou" 
              ></ 
              span 
              > 
              
              
              </ 
              div 
              > 
              
              
              </ 
              body 
              > 
              
              
              </ 
              html 
              >