详解Javascript动态操作CSS

一、使用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. 属性名。<div id="css88" class="ss" style="width:200px; height:200px; background:#333333">JS获取CSS属性值</div> 不能访问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代码';

总结

知道如何动态修改页面上所应用的样式，对创建时髦而又富于交互的 Web 页面来说是极其有用的——本文中所阐述的知识构成了诸如 JavaScript 动画之类更高级的技术的基础。需要注意的是，你应当负责任地使用动态样式修改，而且不要过度滥用。如前面所述，样式修改还能提高Web效率——内容的显示和隐藏可以有助于避免在客户端和服务器之间不必要的数据交互。

赞 (0)

相关推荐

  • JavaScript实现为input与textarea自定义hover,focus效果的方法

    JavaScript实现为input与textarea自定义hover,focus效果的方法

    本文实例讲述了JavaScript实现为input与textarea自定义hover,focus效果的方法.分享给大家供大家参考.具体如下: 这里演示JavaScript为input输入框和textarea文本框自定义hover,focus效果,hover也就是鼠标放上去之后的效果,focus是鼠标焦点问题,要实现 这种效果,需要JS来配合,这个例子就是很不错的,它把网页上输入框和文本框都加入了鼠标悬停和鼠标焦点效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.n

  • js操作css属性实现div层展开关闭效果的方法

    本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

  • JS实现css hover操作的方法示例

    JS实现css hover操作的方法示例

    本文实例讲述了JS实现css hover操作的方法.分享给大家供大家参考,具体如下: hover我们可以用css的方式写,当然,也可以用js的方式写 <html> <head> <title>js的下拉菜单效果</title> <style type="text/css"> *{ padding:0px; margin:0px; } ul li{ list-style: none; } a{ text-decoration:

  • js hover 定时器(实例代码)

    js hover 定时器(实例代码)

    复制代码 代码如下: $("#showComp tr:not('.stlisttitle')").hover(function(){        try{if($("#calendarPanel").is(":visible")) $(".playerlist").hide();else{clearTimeout(timMess);        $(".playerlist").css("to

  • jQuery控制图片的hover效果（smartRollover.js）

    用js实现的好处是:如果一个网站中图片的hover效果比较多,可能每一个都要有css控制,那样代码有的冗余.但是有了js控制,不管有多少图片,hover效果都可以用同样的js,但是必须保证图片的out/off效果和over/on效果命名有规律性,比如: navi01_out.jpg/navi01_off.jpg navi01_over.jpg/nvai02_on.jpg 这样js控制起来非常方便.找到匹配的名称,hover时替换成另一个名称. 今天我想用jQuery控制一下效果: 代码如下: 复

  • js模仿hover的具体实现代码

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="description" content="this" /> <meta name="keywords" content="this" /> <title>this</

  • JS组件Bootstrap dropdown组件扩展hover事件

    JS组件Bootstrap dropdown组件扩展hover事件

    bootstrap导航条当中dropdown组件用得特别频繁,本文就为大家介绍bootstrap中的dropdown组件扩展hover事件,具体内容如下 如何实现这个hover事件呢,其实在dropdown组件的点击事件的基础上很好完成的.细心者可以发现,下拉框出现时,其父级会有一个open的class属性.我们只需要监听hover事件时,给父级增加或删除open类就可以了. boostrap-hover-dropdown.js插件,托管在github上的代码网址:查看 下面是完整的js插件代码

  • 基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)

    一.应用场景 鼠标hover弹出div,并且鼠标离开后不能马上隐藏,因为这个div上还有功能入口.比如: 鼠标经过好友列表中的好友头像时显示资料卡的效果如下所示: hover时显示二维码 二.实现 用如下这样一个简单的效果:鼠标hover到A上显示B来模拟 有2种实现方式,推荐第二种,第一种有弊端下面会说. 1.方法一 原理:把触发元素A和要显示元素B放于同一个父级元素内,鼠标经过父级元素时触发显示B.这样鼠标移动到B时仍然 处于该父级元素内,则div不会隐藏. 代码: <!DOCTYPE ht

  • JS操作CSS随机改变网页背景实现思路

    今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的.具体可以这样做: 1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: var imgArr=["http://www.google.com.hk/intl/zh-CN/images/logo_cn.png", "http://www.baidu.com/img/baidu_sylogo1.gif", "http://www

  • javascript解决IE6下hover问题的方法

    有时候我们想在非a标签上加hover元素 但是我们都知道IE6下不支持XX:hover,所以我们现在可以用js实现掉:代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • 使用js操作css实现js改变背景图片示例

    1.用JS定义一个图片数组,里面存放你想要随机展示的图片 复制代码 代码如下: ar imgArr=["http://www.jb51.net/logo_cn.png","http://www.jb51.net/baidu_sylogo1.gif","http://www.jb51.net/news/uploadImg/20120111/20120111081906_79.jpg", "http://www.jb51.net/news/

随机推荐