文档章节

JavaScript之css操作总结

liu_yong
 liu_yong
发布于 2016/11/06 14:03
字数 510
阅读 7
收藏 0

     用js获取、设置元素的样式是前端经常需要用到的,这里总结一些常用到的办法。

    1. 用js修改元素的class。

    class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了。

element.className;//可以获取元素的class。
element.className='';//可以设置元素的class。

    2. 用js直接设置、获取元素的内联样式。

        ①  对于没有中划线的css属性一般直接使用style.属性名。如obj.style.width, obj.style.left, obj.style.position 获取或设置元素对应的样式。

        ② 对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写。 如: obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex 获取或设置元素对应的样式。

        ③ js操作css float属性的特殊写法 。 因为float是Javascript的保留字, 所以不能使用obj.style.float来设置或获取值, 其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用styleFloat:obj.style.cssFloat。

        ④ 一次操作元素的多个css属性用cssText。如:

obj.style.cssText;//获取元素所有的内联样式
obj.style.cssText='margin-left: 1px; position: relative; left: 10px;';//一次设置多个css属性

    3. 内部样式和外部样式设置获取。

    元素的样式我们一般不会使用行内样式来设置,而是通过link外部样式设置。那么可以用下面的方式来获取元素的样式:

var getStyle=function(obj,styleName) {
	if (obj.currentStyle) {
		// ie
		getStyle=function(obj,styleName){
           return obj.currentStyle[styleName];
        }
        return obj.currentStyle[styleName];
	} else {
		getStyle=function(obj,styleName){
           return getComputedStyle(obj, null)[styleName];
        }
        return getComputedStyle(obj, null)[styleName];
	}
}

    上面的方法不但可以获取非内联样式,也可以获取内联样式。但是不能获取符合样式如padding属性值,只能获取单一样式如padding-left等。

 

 

 

© 著作权归作者所有

liu_yong
粉丝 1
博文 21
码字总数 30353
作品 0
成都
前端工程师
私信 提问
[转] 最全前端开发面试问题及答案整理

原文地址:https://github.com/hawx1993/Front-end-Interview-questions 作者:@markYun 前端开发面试知识点大纲: 1.请你谈谈Cookie的弊端 cookie虽然在持久保存客户端数据提供了方便,分担...

OSC编辑部
2015/07/21
20.7K
4
jQuery、ajax、JSON

最近在做项目的过程中,对于jQuery、ajax、JSON这三者的关系总是理不清楚,于是,在简单是使用,有了丁点的经验,于是对这三者的关系做了下研究: 1、jQuery : 以下来自百度百科 jQuery是一个...

伊人心
2018/12/28
0
0
HTML+CSS+原生JS撸一个tab组件

tab组件是很常用的一个ui组件,之前一种的是第三方组件库中的;最近想巩固一下自己的javascript的基础就决定手动撸一个! 实现的功能 当鼠标移动到标题的时候,选中的标题底部有一条横线; 选...

呼啦呀黑
2018/11/16
0
0
python前端jQuery入门

知识点预习 1.jQuery的加载2.jQuery选择器 3.jQuery的click事件 4.jQuery的样式操作 5.jQuery动画 01- 封闭函数 作用:避免在修改他人代码时出现 方法同名替换的情况想让一个函数直接执行用封...

czbkzmj
2018/12/07
0
0
显微镜下的webpack4:路径操作

对于打包工具来说,最简单也是最复杂的操作莫过于路径的安排了,原本都在下的资源,想要打包到目录下,但是打包出来的文件路径甚不如人意。明明想要分门别类地放置文件文件,然后却像大杂烩一...

cherryvenus
2018/10/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

消息中间件——RabbitMQ的高级特性

前言 前面我们介绍了RabbitMQ的安装、各大消息中间件的对比、AMQP核心概念、管控台的使用、快速入门RabbitMQ。本章将介绍RabbitMQ的高级特性。分两篇(上/下)进行介绍。 消息如何保障100%的...

Java架构师ya七
37分钟前
6
0
如何编写高质量的 JS 函数(1) -- 敲山震虎篇

本文首发于 vivo互联网技术 微信公众号 链接:https://mp.weixin.qq.com/s/7lCK9cHmunvYlbm7Xi7JxQ 作者:杨昆 一千个读者,有一千个哈姆雷特。 此系列文章将会从函数的执行机制、鲁棒性、函...

vivo互联网技术
今天
6
0
学会这5个Excel技巧,让你拒绝加班

在网上,随处都可以看到Excel技巧,估计已看腻了吧?但下面5个Excel技巧会让你相见恨晚。关键的是它们个个还很实用 图一 技巧1:快速删除边框 有时当我们处理数据需要去掉边框,按Ctrl+Shif...

干货趣分享
今天
11
0
JS基础-该如何理解原型、原型链?

JS的原型、原型链一直是比较难理解的内容,不少初学者甚至有一定经验的老鸟都不一定能完全说清楚,更多的"很可能"是一知半解,而这部分内容又是JS的核心内容,想要技术进阶的话肯定不能对这个...

OBKoro1
今天
10
0
高防CDN的出现是为了解决网站的哪些问题?

高防CDN是为了更好的服务网络而出现的,是通过高防DNS来实现的。高防CDN是通过智能化的系统判断来路,再反馈给用户,可以减轻用户使用过程的复杂程度。通过智能DNS解析,能让网站访问者连接到...

云漫网络Ruan
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部