原生JS实现获取及修改CSS样式的方法

家都知道在JavaScript原生操作中获取元素的样式，在实际操作是使用时比较频繁的一件事，这里像大家介绍下获取css样式的方法，希望可以帮助一些需要的人，如果有幸被大牛看到，有更好的办法，欢迎提出！！！

一、行内元素样式获取：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js获取外部样式</title>
</head>
<body>
 <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div>
</body>
<script>
 //获取行间样式
 var div = document.getElementById('div');
 var width = div.style.width;
 alert(width);//200px
</script>
</html>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力

在JS代码中，alert会弹出div元素的width为200px；达到了要获取元素宽度的目的，但是这种简单的方法只适用于获取元素的行内元素样式，并不能获取内部样式和外部样式，在项目中，写入行内元素这种方案并不被大家认同，所以这种方法，只是让大家了解下。

二、非行间样式元素获取：

如果元素样式并非行间样式，利用上面这种方法并不能获取到元素的样式，需要使用另一种方法：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js获取内部部样式</title>
 <style>
 #div{
 width: 200px;
 height: 200px;
 border:3px solid cyan;
 }
 </style>
</head>
<body>
 <div id="div""></div>
</body>
<script>
 var div = document.getElementById('div');
 //获取div的width
 var width = window.getComputedStyle(div,null).width;
 alert(width);//200px
 //修改div的width
 div.style.cssText='width:300px;'
</script>
</html>

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提升思维能力

在上面代码中，使用了window.getComputedStyle('元素',null).'样式',此方法兼容性:火狐谷歌 IE9 获取的为计算后的样式,但是这里需要注意的是用此方法获取的值为只读模式,并不能修改,所以用了style.cssText方式修改了其属性,这里需要注意下书写方式.

三、兼容性:

前段潜规则,凡是好的东西都不能通用,是的,你猜对了,任性的IE并不能使用以上方法,但是IE有自己的方法为currentStyle,用法一样,就不再赘述了,下面直接写出已经处理兼容的代码如下:

var div = document.getElementById('div');
if (div.currentStyle) {
 console.log(div.currentStyle.width);
}else{
　　console.log(getComputedStyle(div,null).width);
}

方法封装:

 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }else{
 return getComputedStyle(obj,false)[name];
 }
}

对前端的技术，架构技术感兴趣的同学关注我的头条号，并在后台私信发送关键字：“前端”即可获取免费的架构师学习资料

知识体系已整理好，欢迎免费领取。还有面试视频分享可以免费获取。关注我，可以获得没有的架构经验哦！！

avaScript动态设置CSS样式实例分析

通过使用文档对象模型DOM，可以将HTML文件当做文档对象，并按照文档对象处理方法进行处理。主要处理形式包括设置HTML标记文本内容、设置元素属性值及对Style样式进行操作等。本文主要介绍使用文档对象模型DOM所提供的Element、HTMLElement等实现对元素Style样式进行快速设置。

DOM标准

DOM（Document Object Model）文档对象模型是W3C提出的技术规范，该规范与浏览器、平台、语言无关。HTML DOM是指适用于HTML的文档对象模型。因此在JavaScript中我们所认识的DOM应当可以理解为HTML DOM。DOM标准相关对象关系描述如下图所示：

DOM标准概念与关系

在DOM标准对象描述中可以看出所有的对象都继承于Node对象，Node对象是DOM文档对象模型的核心。在JavaScript文档对象模型中，Document对象、Element对象等都继承于Node对象，而HTMLDocument对象与HTMLElement对象等又分别继承于Document对象与Element对象。

Element对象提供了HTML页面中所有的元素方法与属性。我们可以借助HTMLElement对象实现对HTML页面元素进行操作与属性值读写等。

HTMLElement设置CSS样式

HTMLElement对象继承自Element对象，因此具有其父类的基本属性与方法。在Element对象主要提供style属性与setAttribute()方法实现对元素样式属性及属性值进行设置。两种方法描述如下：

1、style属性

style属性是HTMLElement继承自父类Element的基本属性之一，主要用于对HTML样式属性进行设置或者样式属性值的读取。在进行样式属性值设置过程中可以分为两种方式进行设置。第一种为设置单个特定style样式，如设置background-color属性值，我们可直接使用如下方法进行设置：

HTMLElement.style.property=value;

第二种设置方法是同时对某个元素全部style样式进行重新设置，这种情况下我们使用style.cssText属性进行整体属性设置，设置语法描述如下：

HTMLElement.style.cssText="property1:value1;...propertyN:valueN";

2、setAttribute()方法设置CSS

setAttribute()方法也是Element对象的基本方法之一，主要用于设置指定元素的指定属性值。如该属性值存在则更新属性值。在HTMLElement对象中我们可以直接使用setAttribute方法进行style属性的值的设置。其基本语法描述如下：

HTMLElement.setAttribute(name,value);

动态CSS样式设置实例

本例主要设置实现在鼠标经过某一个DIV时，动态改变该DIV层的style样式属性，主要改变属性包括背景颜色、字体大小及光标形状等。设计原始DIV样式效果如下图：

原始CSS样式

该案例原始CSS样式实现代码描述如下图所示：

原始页面实现代码

按照实例要求我们为div层添加鼠标over事件，并编写事件处理函数用于响应鼠标处理，具体处理需要实现style样式变化要求。对该div添加onmouseover事件，响应函数名称为changeStyle()。代码描述如下：

事件处理函数

在该事件处理函数中我们传递了用于标识当前元素的this参数，函数在接收到该参数后能够直接定位与当前div，并进行下一步处理。changeStyle方法描述如下：

事件处理方法1

事件处理方法1使用style.cssText方法进行了CSS样式的动态设置，使用setAttribure方法进行样式设置代码如下：

事件处理方法2

通过编写以上代码可以实现鼠标经过DIV时，style样式中的背景颜色、文字大小及光标样式的动态变化，变化之后效果描述如下图：

动态改变样式效果

以上给出了Element、HTMLElement及DOM基本概念说明，并对HTMLElement对象style属性与setAttribute方法在CSS样式改变中的应用进行了语法说明与实例分析。如需完整代码关注并私信。

本头条号长期关注编程资讯分享；编程课程、素材、代码分享及编程培训。如果您对以上方面有兴趣或代码错误、建议与意见，可在评论区回复。更多程序设计相关教程及实例分享，期待大家关注与阅读！相关文章链接如下：

前端设计-JavaScript实现复选框的分组单选

本文由kid编程原创，欢迎关注，带你一起长知识！

言

浏览器自带的input标签，例如text,radio,checkbox的样式都显得很难看，虽然已经有类似于Bootstrap这种稳定的类库可以使用，但是对于定制化的input样式同样难以满足，今天我们就自己动手，一起来看看如何使用CSS3实现一个好看的input样式。

CSS3

如果感兴趣的，可以去github上去看源码进行学习，地址如下：

https://github.com/zhouxiongking/article-pages/tree/master/articles/beautifulInput

input-text

首先我们来看下type为text的文本框元素，实现的动态效果如下图所示。

效果图

实现过程

接下来我们来看看这样的效果是如何实现的。页面上的元素主要是以下几个部分。

input元素，将其border设置为none
label元素，与input元素绑定
div元素，实际为下面的横线

我们需要达到的效果是，在未点击input元素时，通过label元素显示提示信息；在input元素获得焦点后label元素会移动到input元素上面，并且显示出动态的获取焦点的过程，此后可以在input元素中正常输入信息。

代码组成

首先我们来看看HTML部分的代码。

HTML代码

通过html部分代码，可以看出页面主要由input，label，div三个元素构成。

然后我们再来看看CSS部分的代码，由于CSS部分代码比较多，我们拆开来看。

先看最外层的容器样式代码如下。

外层容器

然后是input标签的样式，在CSS3中提供了placehoder的样式，在这里为了防止placeholder属性会覆盖到label标签，我们将其透明度设置为0。关于input元素以及其placeholder属性值的css样式部分如下所示。

input样式

紧接着是下面的label标签的样式，因为在input获取焦点时，label元素会移动到input上方，因此需要给label元素加上一个动画效果。label部分代码如下所示。

label部分代码

其次是最下面的一条横线，在input元素未获取焦点的状态下，其长度为0。

横线

最后是在input获取焦点后的样式变化，下面的横线会逐渐延长至最大宽度，而且具有不同的颜色，这一动态效果由下面的代码决定。

获取焦点动态效果

至此，页面上所有的代码均已完成，在浏览器中运行页面后会看到文章开始时的效果。

结束

在万千已经成型的前端框架中，自己写出一个样式也算是一种收获，在后面的文章中，我会继续写关于如何实现checkbox和radio样式的文章，敬请期待~

在线咨询

上一篇：如何使用CSS开发精美3D旋转相册？
下一篇：清华大学在高活性骨诱导膜的设计取得新进展

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商