js原生css修改,原生js获取、添加、修改

在html中样式分为：浏览器默认样式，引用样式(link外部样式文件，stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

#box{ width:300px; height:100px; background:#ff0; border:1px solid #0076FF;}

我们如何通过js获取box节点的高和border值呢？定义一个getStyle的方法，代码如下：

//获取非行间css样式

function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值

if(obj.currentStyle){ //针对ie获取非行间样式

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr]; //针对非ie

};

//使用

var b=document.getElementById('box');

console.log(getStyle(b,"height"));//获取元素的高100px

console.log(getStyle(b,"border"));//获取元素的boder显示为：1px solid rgb(0,118,255)

这里的getStyle只能获取，如果需要添加或者修改非行间css样式呢，这里定义一个方法，代码如下：

//为获取/添加css样式

function css(obj,attr,value){ //对象，样式，值。传2个参数的时候为获取样式，3个是设置样式

if(arguments.length == 2){ //arguments参数数组，当参数数组长度为2时表示获取css样式

return getStyle(obj,attr); //返回对象的非行间样式用上面的getStyle函数

}else{

if(arguments.length == 3){ //当传三个参数的时候为设置对象的某个值

obj.style[attr] = value;

};

//使用

var b=document.getElementById('box');

css(b,"background","#f0f");//把box的背景替换为#f0f

console.log(css(b,255)

js原生css修改,原生js获取、添加、修改_非行间css样式相关推荐

css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用 by Frank Lämmer 由FrankLämmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I h ...
adb修改什么文件获取root权限_记一次获取系统文件的过程
来自93期优秀学员--王同学的学习笔记这周学习了安卓adb命令,有些操作需要root权限才能进行,比如调取一些系统文件,于是我按照老师的方法输入adb root,发现出了问题.果然,系统文件是获取不 ...
css设置元素继承父元素宽度_详解CSS中的百分比的应用
前言百分比的应用随处可见,但是就一直没有机会去好好总结一下,如今项目中遇到的坑都是当年留的泪,在月底之前终于把这个好久想总结的文章给写完了. 1.使用百分比的场合在目前项目中,最常用百分比的莫过于 ...
html js修改readonly,js控制html元素的readonly属性
html元素假设为只读,那么其readonly="readonly",我们现在想通过js来改变readonly属性为可以输入. 初始时,两个输入框都是只读.点击change按钮后, ...
wordpress怎么修改html,WordPress后台编辑器HTML模式界面中添加修改删除按钮
在WordPress编辑器HTML模式界面中添加按钮一文中,我大致介绍了怎么在后台添加一些自定义的按钮,本文则更为详细全面的对wordpress后台编辑器HTML模式下的按钮自定义进行详解,以让开发 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
js数组获取index_想自学JS吗？想提升JS底层原理吗？76张脑图带你彻底搞懂原生JS...
本篇内容适用于:初学前端:及工作时间不久想回顾基础的各位伙伴: 文章主要由图片组成,看起来可能会不太方便,适合保存下来单张查看: 既然来了,就看看在走吧,总会有些收获的: 一.前端发展史二.JS基础 ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
js基础3 dom基础/绑定获取事件/图片切换练习/文档加载/全选全不选/dom的其他属性/dom的增加/添加删除练习
dom基础 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8 ...

js原生css修改,原生js获取、添加、修改_非行间css样式

js原生css修改,原生js获取、添加、修改_非行间css样式相关推荐

最新文章

热门文章