js style方式设置元素样式源码下载

本章节介绍一下介绍一下如何使用style方式设置元素的样式。

由于它使用方式简单，且非常的频繁，所以很多朋友对它都不会陌生，比较熟悉的略过即可，可能对于初学者来说还有点价值。

下面就通过代码介绍你一下它的基本用法和一些使用的注意点。

代码实例:

[ bootstrap ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="https://www.51qianduan.com/" />
<title>51前端</title>
<script type="text/javascript">
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.style.color="blue";
}
</script>
</head>
<body>
51前端:<input type="text" id="txt" value="51qianduan.com"/>
</body>
</html>

以上代码是一个style方式设置元素样式的简单的代码实例。

下面开始对它进行深入一点的介绍:

style方式设置的样式，其实实在对应的标签上面添加一个style属性，所以上面的代码就等同于如下方式设置样式。

[ bootstrap ] 运行代码下载代码

<script>
51前端:<input type="text" style="color:blue" id="txt" value="51qianduan.com"/>
</script>

一.在设置和获取float属性的注意点:

关于这个注意点这里就不多介绍了，具体可以参阅javascript使用style方式如何设置和获取元素的float浮动属性一章节。

二.获取样式属性值:

上面已经说过，style方式设置元素属性等同于在标签内添加style属性，那么使用style方式也只能够获取由style属性设置的样式值。

如果要获取最终的样式属性值可以参阅js获取元素的样式值简单介绍一章节。

三.关于设置符合属性的注意点:

这里就不多介绍了，具体可以参阅style方式获取元素的border和background等符合属性一章节。

如果要获取最终的样式属性值可以参阅getComputedStyle()函数如何获取border等符合属性值一章节。

三.关于属性名称:

如果属性名称是符合单词，也就是由多个英文单词组合而成。

那么这个时候就要使用驼峰写法，具体可以参阅javascript变量命名规则简介一章节，里面的Camel标记法就是所谓的驼峰命名。

代码如下:

[ bootstrap ] 运行代码下载代码

<script>
odiv.style.borderTopColor
</script>

代码描述：js style方式设置元素样式。js style方式设置元素样式源码下载

下载全部收藏

125 167

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册

522688

作品：1334 | 粉丝：44

关注

TA的相关作品 >>更多

热搜关键词

js style方式设置元素样式源码下载

JavaScript指定元素同辈元素源码下载

js删除父元素所有元素节点源码下载

javascript通过class属性元素源码下载

javascript获取指定元素在数组中数目源码下载

javascript交换li元素的位置代码实例

javascript使用style方式获取元素float浮动属性简单介绍