利用JS改变复选框input-checkbox的默认样式
浏览器解析的html元素大多都有默认样式,所谓默认样式自然是大众化简洁化的,美观总是达不到要求。所以我们才会用CSS来改变他们的样式,使之美观。然而有一些元素是无法用CSS来定义样式的,比如表单中的复选框、单选框、下拉列表等,一般情况下是不拘这些小节的,默认的东西看多了也成了大家能接受的定律;但作为前端人员,总会遇到追求完美效果的网站,还好办法总是有的,这就需要借助JS来定义样式了。
如果我们是要在一个小框做成两个图片:一个是选中状态,一个是未选中状态。那么我们可以在页面里添加下面一段JS,并修改相应的四处图片路径和名称。
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
这样看来似乎有些繁琐,但其实只需要改四个地方。有了这段JS,以后解决复选框样式就能得心应手了。
Need a translation service?
Please enter your personal details and we will contact you shortly
Words translated by CCJK
146,096,379Over 95% of our clients recommend our language services to others