js点击css样式,css按钮被点击之后的样式
解析js如何获取css样式
一、获取内联样式
成都创新互联公司是一家专注于网站设计制作、成都网站设计与策划设计,许昌网站建设哪家好?成都创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:许昌等地区。许昌做网站价格咨询:18980820575
div
id
="myDiv"
style="width:100px;height:100px;background-color:red;
border:1px
solid
black;"/div
script
var
myDiv
=
document.getElementById("myDiv");
alert(myDiv.style.width);//100px
alert(myDiv.style['height']);//100px
var
style=myDiv.style;
alert(style.backgroundColor);//red
myDiv.style.backgroundColor='green';//myDiv背景色变为绿色
/script
在这种情况下,获取和设置样式只靠style属性就可以,因为element.style属性返回的是类似数组的一组样式属性及对应值,因此访问具体样式的时候可以采取两种方式即“ele.style.属性名称”和“ele.style['属性名称']”。但是,要注意的是,针对css样式里background-color;margin-left之类的短杠相接的属性名称,在使用style属性获取设置样式的时候名称要改为驼峰式,如ele.style.backgroundColor.
二、因为第一种方法,即使用style属性只能获取到内联样式。但是,实际情况是文档在现在都基本遵循分离思想,样式基本都是外部链接,所以三种样式都要考虑到的,这时就要使用其他方法进行获取,而在这种情况下进行样式获取时,不同的浏览器又有不同的处理方式(主要是ie和非ie),因此根据浏览器可以分为两种方式:
(2.1)非ie浏览器中,使用document.defaultView对象的getComputedStyle(ele,null/伪类)方法,该方法接受两个参数,第一个为要考察的元素,第二个则要根据情况,如果只是考察元素本身则为null,如果要
考察伪类,则为响应的伪类。该方法获取到的为元素应用的最终样式组合,同样是类似数组的一个实例。
(2.2)在ie浏览器中,对getComputedStyle()方法不支持,但是针对每个标签元素都有一个近似于style属性的currentStyle的属性,且用法和style用法相同。只不过获取到的样式范围不一样。currenStyle获取到的和getComputedStyle()方法相接近。
为了在处理时达到兼容,可以根据这两种不同的处理方式创建一个函数来达到兼容目的,使得不管在那种浏览器中,都可以成功获取样式。如下所示:
style
type="text/css"
#myDiv
{
background-color:blue;
width:100px;
height:200px;
}
/style
div
id
="myDiv"
style="background-color:red;
border:1px
solid
black;"/div
script
var
myDiv
=
document.getElementById("myDiv");
var
finalStyle
=
myDiv.currentStyle
?
myDiv.currentStyle
:
document.defaultView.getComputedStyle(myDiv,
null);/*利用判断是否支持currentStyle(是否为ie)
来通过不同方法获取style*/
alert(finalStyle.backgroundColor);
//"red"
alert(finalStyle.width);
//"100px"
alert(finalStyle.height);
//"200px"
/script
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!
js点击改变当前菜单css样式
//先获取dom节点
var
a
=
document.getelementbyid('id')
a.style.color="red";
//改变颜色
a.innerhtml='修改内容';
//修改内容
//还可以动态的添加css来改变css样式
a.classname='class名';
笔记:JS设置CSS样式的几种方式
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");
如何用js实现,点击后,改变一个css
方法步骤:
先获取要改变css的元素。
改变这个元素的style属性。
eg:下面是改变div的背景色,改为蓝色。
style
div{width:200px;height:200px;background:#f00;}
/style
div改变背景色/div
script
var div = document.getElementsByTagName("div");
div.style.background = "blue";
/script
JS如何调用CSS样式表呢?
举例1:
li onmouseover='this.className='AAAAA'' onmouseout='this.className='BBBBB''
鼠标经过 样式表变化 可用于 颜色变化等
举例2:
用户名:input type="button" class="input1" onclick="this.className='input2'"
鼠标点击 样式表变化
或者 单独写一个javascript函数
举例3:
script language=javascript
function ChangeStyle(idName,StyleName){
document.getElementById(idName).className=StyleName
}
/script
input type=button onclick="ChangeStyle(Text1,"div2")" vaule="变换"
div id=Text1 class=div1啊哈哈哈哈/div
分享名称:js点击css样式,css按钮被点击之后的样式
网页链接:http://scyanting.com/article/dsdsjcc.html