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

更新日期: 2018-04-17阅读量: 1960标签: 样式

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

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

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

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

Vue之样式绑定

在前端开发中,设置元素的 class 列表和内联样式是基本要求。本文主要讲解Vue开发中,样式列表和内联样式的绑定,仅供学习分享使用,如果有不足之处,还请指正。

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

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

vue用v-html加载渲染,里面的内容样式不生效

需要输出富文本的内容,需要设置里面的图片样式最大宽度100%。可是设置img 100%后没反应,看F12检查元素也没加上去。解决方法有2个:coped属性导致css仅对当前组件生效

css样式大全,完整的Css样式大全(整理)

CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。

css样式的继承性、层叠性 、优先级

css样式的继承性:给父元素设置一些属性,子元素也可以使用。应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量

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

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

CSS书写位置

上面我们使用了三种方式为 html 标签添加样式,归结起来就三种:1.元素内部: 行内样式2.文档内部: style标签3.外部样式: link标签;一般工作中都是使用外部样式,其余两种可以在学习测试的时候使用

引入CSS样式的三种方式

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

css对大小写敏感吗?

css指的是层叠样式表(Cascading Style Sheets),它是一种用来表现HTML或XML等文件样式的计算机语言,是用来表示html样式的一种编程语言,是可以做到网页和内容进行分离的一种样式语言。

点击更多...

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