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

时间: 2018-04-17阅读: 1043标签: 样式

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


html如下:

<style>
#box{ width:300px; height:100px; background:#ff0; border:1px solid #0076FF;}
</style>
<div id="box"></div>


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

<script type="text/JavaScript">
//获取非行间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)
</script>


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

<script type="text/JavaScript">
//为获取/添加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,"border"));//获取元素的boder显示为:1px solid rgb(0, 118, 255)
</script>


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/657

为什么要初始化css样式?

为什么要初始化css样式1.浏览器差异:不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量;如果不初始化,整个页面做完会很糟糕,重复的css样式很多

CSS设置滚动条样式

scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。scrollbar corner为横向和竖向的交叉角区域

整理一些少用但又实用的 CSS 样式

什么是偏门,就是有些片段很少使用,时间久了就记不起来,但用的时候又要去找,所以这里为大家整理一些少用但又实用的 CSS 样式,input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色

vue单页面修改样式无法覆盖问题

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。vue组件编译后,会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。

CSS3 filter(滤镜) 网站整体变灰色调

通常很多网站的色系都会整体变成灰色调,那是怎么实现的?其实很简单,在body上整体加一段样式即可。CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

css样式冲突怎么解决?

一个网页有时会使用两种CSS,那发生css样式冲突要怎么解决?下面本篇文章就来给大家介绍一下发生css样式冲突的解决方法,希望对大家有所帮助。

什么是层叠样式表?

层叠样式表(Cascading Style Sheets)简称CSS,它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

css常用样式整理_css属性大全

css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性

CSS如何给文字添加下划线样式?

在CSS中可以使用text-decoration属性或border-bottom属性来给文字添加下划线样式。下面本篇文章就来给大家介绍一下,希望对大家有所帮助。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广