个人怎么做微信小程序_原生javascript完成读写CS

摘要: 原生态javascript完成读写能力CSS款式的方式详细说明 近期学习培训中碰到这一难题,以便今后便捷查寻,自己阅览了一些材料小结了下列方式,只限原生态JS,若有错误的地区热烈...

原生javascript实现读写CSS样式的方法详解       最近学习中遇到这个问题,为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!下面这篇文章主要介绍了利用原生javascript实现读写CSS样式的方法,需要的朋友可以参考下。

前言

可能大家一说起操作css样式,很多人都会想到jQuery的css方法:$(selector).css(name) ,但是有思考过如何使用原生js来实现类似的功能么?

大家最熟悉的原生js操作样式的方法非DOM中的Style对象莫属了,但是这个方法只能获取和修改html文档中的内联样式,无法操作非内联样式(内部样式和外部样式表)。

我通过搜索和整理,总结了使用原生js对css样式的读写实现。下面话不多说,来看看详细的介绍吧。

获取样式

1. dom style

这个方法只能获取内联样式:

var text = document.getElementById('text');
var textColor = text.style.color;
// 得到textColor的值为 '#000'

2. currentStyle

这个方法只适用于IE浏览器,在形式上与element.style相近,区别在于正如currentStyle其名——目前的样式(css加载后的样式),返回的是元素当前最终的CSS属性值,包括了内部style标签里的样式和外部引入的css文件。

用法:元素.currentStyle.属性

比如我们要获取id为box的width:

var boxWidth = document.getElementById('box').currentStyle.width;
// 得到boxWidth的值为 '200px'

3. getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),并且是只读的。

在兼容性上,基本支持:Chrome、Firfox、IE9、Opera、Safari

用法:getComputedStyle(元素, 伪类).属性,第二个参数如果不是伪类就设置为null吧。

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

来~封装一个通用的获取样式的函数

为了适用于各大主流浏览器,我们来写一个函数:

// 这个函数需要传递两个参数:元素对象和样式属性名称
function getStyle(el, styleName) {
 if( el.currentStyle ) {
 // for IE
 return el.currentStyle[styleName];
 } else {
 // for peace
 return getComputedStyle(el, false)[styleName];
}

接着调用这个函数来获取box的宽度:

var box = document.getElementById("box");
var boxWidth = getStyle(box, 'width');

这个函数并没有考虑到对伪类的相关操作,可以根据需要自行扩展~

getComputedStyle与style的区别?

既然都是获取样式属性的值,它们有啥区别呢:

只读与可写

getComputedStyle方法是只读的,只能获取样式而不能设置,但是element.style既能读也能写。

获取的对象范围

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(即使没有CSS代码,也会把默认的祖宗八代都显示出来);而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素 p ,getComputedStyle方法返回对象中length属性值(如果有)就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。

引用自——张鑫旭博客文章

设置样式

1. dom style

这个不用说了吧,比如把元素的背景颜色改为红色:

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

2. cssText属性

cssText 的本质就是设置 HTML 元素的 style 属性值。它是一组样式属性及其值的文本表示。这个文本格式化为一个 CSS 样式表,去掉了包围属性和值的元素选择器的花括号。

它的用法和innerHTML类似: document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

详细请参考:

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Javascript能带来一定的帮助,如果有疑问大家可以留言交流。谢谢大家对凡科的支持。



联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503