关闭

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

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

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

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

js怎么移除css样式?

在工作中,经常需要使用Javascript来改变页面元素的样式。其中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们通常是通过处理HTML Dom的classname特性来实现的

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

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

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

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

CSS3 简单的砸金蛋样式

实现样式:1、鼠标移入后,鼠标样式图标变为“锤子”。2、用户砸金蛋,锤子简单的扬起效果。3、砸碎金蛋,显示内容

VUE中CSS样式穿透

在做两款H5的APP项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4(项目结构 webpack+vue+vuex+vue-router+vant+less)

CSS 边框样式

我们来学习边框样式,主要包括如何设置边框的宽度、边框的颜色、边框的样式等。当我们给某个元素设置边框时,可以分为上下左右四个边框,既可以同时设置四个边框的样式,也可以分开设置四个边框的样式。

CSS 中重要的层叠概念

最近在项目的过程中遇到了一个问题,menu-bar希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了 z-index 也没有效果,不知道什么原因,因此找了一下css有关层叠方面的资料,解决了这个问题,这里记录一下

简写的 border-radius 100% 和 50% 是等效的

border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角一致的情况。比如实现一个圆形按钮,其中 border-radius 数值有些人写为 50%,有些人则写成 100%

css实现文本底部添加下换线

最近在开发项目,针对小程序前端,显示文本需要添加下划线问题,起初是通过border-bottom:1rpx solid #eee; 进行编写,但是总是觉得线的高度过于粗,移动端最小单位值是 1 即:1rpx 1px,高度设置0.3是不生效的

使用<label>标签修改input[type=checkbox]的样式

因为<label>的特性有两点 : 不呈现任何效果;用户点击该标签, 浏览器能自动将焦点转移到相关的表单控件上.所以正适合用于修改input的样式,进入正文, 修改input[type=checkbox]的样式

点击更多...

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