1、改变className,但首先在样式表中预设定样式类。
例如:document.getElementById('obj').className='...'
2、改变cssText。
例如:document.getElementById('obj').style.height='100px'
~如果你认可我的回答,请及时点击【采纳为满意回答】按钮
~~手机提问的朋友在客户端右上角评价点【满意】即可。
~你的采纳是我前进的动力
~~O(∩_∩)O,记得好评和采纳,互相帮助,谢谢。
1、直接更改,比如:
xID.style.display = "block" // 更改display属性,会覆盖css中的定义。xID.style.display = "" // 取消js更改display属性,以css样式为准。
这里的xID,是通过id获取的标签。当然,也可能是通过tagName之类的获取的标签。
这种方式,简单直接。但是要修改大量的样式的时候,不适合。所以,我更推荐第二种方式。
2、更改类名
xID.className = "xx yy"如果有多个类,就用空格隔开。前提,在样式中要有已有类的定义。比如这里的xx和yy类,在css中应该是写好的。
这种方式把所有的样式写在了css文件中,适合更改较多的样式以及炫酷的样式。js就只做一件事情:改类。至于这个类会把标签变成什么样子,交给css吧。
通过jquery也可以达到如上的效果:
$("#xID").css({fontSize:"12px",
display:"block"
}) // 直接更改样式
$("#xID").addClass("xx") // 增加删除类
$("#xID").removeClass("xx")
<link href="css/color1.css" id="color" rel="stylesheet" type="text/css" /><!--注意这行的id--><a onclick="changeStyle(1)">样式1</a>
<a onclick="changeStyle(2)">样式2</a>
上面是html,下面是js.把选定的样式加载进cookies ,网页加载先查cookie。
function getObject(elementId) { //获取指定id的objectif (document.getElementByIdx) { return document.getElementByIdx(elementId) }
else if (document.all) { return document.all[elementId] }
else if (document.layers) { return document.layers[elementId] }
}
function changeStyle(id){//切换样式
var stylesheet=getObject("color").href="css/color"+id+".css"
document.cookie="stylesheet="+escape(stylesheet)//写入Cookie
//alert(document.cookie)
//alert(stylesheet)
}
function initStyle(){ //初始化样式,如果cookie存在样式,则加载cookie样式,否则加载默认样式
if(/stylesheet=([^]+)/.test(document.cookie))//判断是否存在cookie.
getObject("color").href=unescape(RegExp.$1)
//alert(/stylesheet=([^]+)/.test(document.cookie))
}initStyle()