您的位置:首页> 前端教程> CSS操作

JavaScript style 属性

2018-5-27 22:05| 作者: antzone| 查看: 2498| 评论: 0|来自: 蚂蚁部落

使用此属性可以设置元素的CSS样式。

代码实例:

[JavaScript] 纯文本查看 复制代码
divObj.style.width="100px"

以上代码可以将一个元素的宽度设置为100px。

一.对于没有中划线的CSS属性:

如果是类似于width和height这样没有中划线的CSS属性,使用就比较直接。

[JavaScript] 纯文本查看 复制代码
divObj.style.width="100px";
divObj.style.height="20px";

二.对于带有中划线的CSS属性:

在CSS中有很多属性是带有中划线的,例如background-color、z-index等,使用原则就是将中划线去掉,然后将中划线后的单词第一个字母大写,代码实例如下:

[JavaScript] 纯文本查看 复制代码
divObj.style.backgroundColor="#ccc";
divObj.style.zIndex=5;

三.关于一些特殊的CSS属性:

float属性比较特殊,是ECMAScript保留字,所以不能直接使用,下面介绍一下在各个浏览器中的使用方式:

(1).IE浏览器中,使用以下方式:

[JavaScript] 纯文本查看 复制代码
thediv.style.styleFloat="right";

(2).在谷歌和火狐浏览器中,使用以下方式:

[JavaScript] 纯文本查看 复制代码
thediv.style.cssFloat="right";

以上方式IE9和IE9以上浏览器也是支持的。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var thediv=document.getElementById("thediv");
  thediv.style.width="100px";
  thediv.style.height="30px";
  thediv.style.backgroundColor="red";
  if(document.all){
    thediv.style.styleFloat="right";
  }
  else{
    thediv.style.cssFloat="right";
  }
}
</script>
</head>
  
<body>
<div id="thediv"></div>
</body>
</html>

以上代码可以设置div的尺寸、背景颜色和浮动方向,代码比较简单。 

特别说明:if(document.all)用来判断低版本浏览器类型的。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部