利用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,以后解决复选框样式就能得心应手了。

Need a translation service?

Please enter your personal details and we will contact you shortly

Words translated by CCJK

146,096,379

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