0

0

javascritp 操作 css_html/css_WEB-ITnose

php中文网

php中文网

发布时间:2016-06-24 12:22:51

|

1077人浏览过

|

来源于php中文网

原创

CSS

Javascript动态操作CSS总结

http://sweetpoem.iteye.com/blog/1099825

一、使用js操作css属性的写法

1、对于没有中划线的css属性一般直接使用style.属性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position
2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。
如:obj.style.marginTop,obj.style.borderLeftWidth,obj.style.zIndex,obj.style.fontFamily等
3、js操作css float属性的特殊写法
因为 float 是javascript的保留字,我们不能直接使用obj.style.float来使用,这样操作是无效的。其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器Mozilla(gecko),ff等用 styleFloat:obj.style.cssFloat。
 
二、使用js获取css属性值

1、获取行内Style:obj.style. 属性名。
JS获取CSS属性值
 不能访问class。
2、获取Class内及Link外部的Css属性:IE中使用的是obj.currentStyle[“属性名”]方法,而FF是用的是getComputedStyle 方法
 
三、使用js给css属性赋值

1、赋值class属性
赋值:document.getElementById('ceil').className = "class1";
如它有多个值:document.getElementById('ceil').className = "class1 class2 class3";
2、obj.style.cssText设定一个对象的css样式
document.getElementById('navition').style.cssText = "您的CSS代码';
 
还有其他的总结吗?

回复讨论(解决方案)

这次说说javascript。前端三大代码,html、css、javascript(jquery)。我还是想说下css方面的。所以就写个javascript操作css的帖子。javascript也是前端最重要的功能语言,不懂这个真没法混啊~
以前javascript作为脚本语言的时候,主要功能就是操作dom,很多就是操作元素的样式。
大家最熟悉应该就是style属性了。
比如:obj.style.display = "none";
就可以把obj元素隐藏。但是这个style是把代码以内联的形式写进html里面的。读取属性的时候也只能读取内联形式的css。比如:




如果js里面添加语句 
document.getElementById('out').style.width = 100 + "px"; 
则id="out"的div元素的HTML代码会变为

用style属性修改的css并没有修改css样式表里面的样式,只是以内联形式写进了html代码里面。但是由于内联的css优先级高,会覆盖css样式表里面的。

如果设置css的话,用style还是比较好的。但是如果读取css属性值呢?我们一般是把样式写在外部样式表,这样子怎么读取css属性值呢。这就是这个帖子主要讲的地方。

1.inlineStyle[element的style属性]
      无论是在ie还是ff中,element都有一个类型为Css2Properties的style属性,其属性对应着html中的style属性.这些值可以查询也可以被修改.注意通过的style查询得到的值都是以字符串的形式返回,在设置也只能设置为字符串,对于数值还必须带上相应的单位.
e.style.left = "300px";
var totalMarginWidth = parseInt(e.style.marginLeft) +parseInt(e.style.marginRight);

Node 理解

element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;

element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;

var padding_left = 50;
element.style.left = padding_left + “px”;//不要忘记加单位

var topMargin = 10,rigntMargin = 11,bottomMargin = 12,leftMargin = 13;
element.style.margin = topMargin + ”px” + rigntMargin + “px” + bottomMargin + “px” + leftMargin + “px”;

Javascript 对表格排序



SortTable2






























































































































 
Last Name First Name Birthday Silbings
Simth John 7/12/1978 2
Johnson Betty 5/12/1965 5
Henderson Nathan 10/15/1977 3
Willianms James 2/25/1949 1
Gilliam Michael 7/8/1980 4
Walker Matthew 6/18/1981 3
Willianms James 2/25/1949 1
Gilliam Michael 7/8/1980 4
Walker Matthew 6/18/1981 3
Willianms James 2/25/1949 1
Gilliam Michael 7/8/1980 4
Walker Matthew 6/18/1981 3
李名 James 2/25/1949 1
Gilliam   7/8/1980 4
Walker Matthew 6/18/1981 3
Willianms James 2/25/1949 1
Gilliam Michael 7/8/1980 4
Walker Matthew 6/18/1981 3




function click_a(divDisplay)
        {
            if(document.getElementById(divDisplay).style.display != "block")
            {
                document.getElementById(divDisplay).style.display = "block";
            }
            else
            {
                document.getElementById(divDisplay).style.display = "none";
            }
        }

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



无标题文档




test





相关专题

更多
C++ 高级模板编程与元编程
C++ 高级模板编程与元编程

本专题深入讲解 C++ 中的高级模板编程与元编程技术,涵盖模板特化、SFINAE、模板递归、类型萃取、编译时常量与计算、C++17 的折叠表达式与变长模板参数等。通过多个实际示例,帮助开发者掌握 如何利用 C++ 模板机制编写高效、可扩展的通用代码,并提升代码的灵活性与性能。

10

2026.01.23

php远程文件教程合集
php远程文件教程合集

本专题整合了php远程文件相关教程,阅读专题下面的文章了解更多详细内容。

29

2026.01.22

PHP后端开发相关内容汇总
PHP后端开发相关内容汇总

本专题整合了PHP后端开发相关内容,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

php会话教程合集
php会话教程合集

本专题整合了php会话教程相关合集,阅读专题下面的文章了解更多详细内容。

21

2026.01.22

宝塔PHP8.4相关教程汇总
宝塔PHP8.4相关教程汇总

本专题整合了宝塔PHP8.4相关教程,阅读专题下面的文章了解更多详细内容。

13

2026.01.22

PHP特殊符号教程合集
PHP特殊符号教程合集

本专题整合了PHP特殊符号相关处理方法,阅读专题下面的文章了解更多详细内容。

11

2026.01.22

PHP探针相关教程合集
PHP探针相关教程合集

本专题整合了PHP探针相关教程,阅读专题下面的文章了解更多详细内容。

8

2026.01.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

55

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.7万人学习

Django 教程
Django 教程

共28课时 | 3.4万人学习

Pandas 教程
Pandas 教程

共15课时 | 1.0万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号