利用JS改变复选框input-checkbox的默认样式

浏览器解析的html元素大多都有默认样式,所谓默认样式自然是大众化简洁化的,美观总是达不到要求。所以我们才会用CSS来改变他们的样式,使之美观。然而有一些元素是无法用CSS来定义样式的,比如表单中的复选框、单选框、下拉列表等,一般情况下是不拘这些小节的,默认的东西看多了也成了大家能接受的定律;但作为前端人员,总会遇到追求完美效果的网站,还好办法总是有的,这就需要借助JS来定义样式了。 先来看一个自定义复选框的效果: 复选框 如果我们是要在一个小框做成两个图片:一个是选中状态,一个是未选中状态。那么我们可以在页面里添加下面一段JS,并修改相应的四处图片路径和名称。 <script type="text/javascript"> function getid(id) { return document.getElementById(id); } function gettag(tag,obj) { if(obj) { return obj.getElementsByTagName(tag) } else { return document.getElementsByTagName(tag) } } function addLoadEvent(func) { var oldonload=window.onload;if(typeof window.onload!="function") { window.onload=func; } else { window.onload=function() { oldonload();func(); } }; } function radio_style() { if(gettag("input")) { var r=gettag("input"); function select_element(obj,type) { obj.parentNode.style.background="url(../images/checkOn.png) no-repeat left center"; if(obj.type=="checkbox") { obj.parentNode.style.background="url(../images/checkOn.png) no-repeat left center"; } if(type) { obj.parentNode.style.background="url(../images/checkOn.png) no-repeat left center"; if(obj.type=="checkbox") { obj.parentNode.style.background="url(../images/check.png) no-repeat left center"; } } } for(var i=0;i<r.length;i++) { if(r[i].type=="radio"||r[i].type=="checkbox") { r[i].style.opacity=0;r[i].style.filter="alpha(opacity=0)"; r[i].onclick=function(){select_element(this);unfocus(); } if(r[i].checked==true) { select_element(r[i]); } else { select_element(r[i],1); } } } function unfocus() { for(var i=0;i<r.length;i++) { if(r[i].type=="radio"||r[i].type=="checkbox") { if(r[i].checked==false) { select_element(r[i],1) } } } } } } addLoadEvent(radio_style); </script> 这样看来似乎有些繁琐,但其实只需要改四个地方。有了这段JS,以后解决复选框样式就能得心应手了。

Words translated by CCJK

146,096,379

Request a call or contact us

  •  

    Call ccjk.support for professional assistance

  •  

    Click Here to leave us a message and be as detailed as possible.

We are Certified

Our Client Satisfaction

rating for previous quarte

4.00

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP