Javascript 操作 Style 与CSS语法 不同点。
JavaScript 直接对 style 属性进行修改,来达到动态改变元素风格的目的。
假定元素(id1)的风格表单声明 :
style="font-family:Arial;font-size:12px;"
则您就可以在 JavaScript 中读取和修改风格属性
document.getElementById("id1").style.fontFamily = "Geneva";
document.getElementById("id1").style.fontSize = "14px";
注意:CSS 属性自身是 camelCased 的大小写是驼峰式的,即第一个词的首字小写,随后的每个词首字大写,而不是用连字符“-”进行连接的;如 document.getElementById("id1").style.font-family = "Geneva";这样写是错误的。
利用JavaScript可以在在几个层面上操作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);
2.computeStyle[完整的css属性列表]
ff中通过windoiw对象的getComputedaStyle(),方法得到的是一个只读的Css2Properties,它完整的反映了待查询元素的属性.该方法有两个参数,第一个是待查询element的引用,第二个是伪类如:after等,ff中要求提供两个参数,一般吧第二个设为null;
在ie中每个元素都有一个currentStyle属性来对应ff中的getComputedStyle()指向该element的完整属性列表.
3.操作element的class属性
对于element的css属性class在JavaScript中对应的是className,值得注意的是一个元素可以有多个class,在查询和更改时都要注意进行判断.
//CSSClass.js:一个用来操作class的实用类var CSSClass = {};
//创建命名空间 http://www.ukseo.cn
CSSClass.has = function(e, c)
//判断给定的元素是否含有该类,有返回true{
if (typeof e == "string") e = document.getElementById(e);
// 如果传入的的是字符串则则把它当作元素id
var classes = e.className;
if (!classes) return false;
if (classes == c) return true; // 只有一个class
return e.className.search("
\\b" + c + "
\\b") != -1;
};
CSSClass.add = function(e, c)
{
if (typeof e == "string") e = document.getElementById(e);
if (CSSClass.is(e, c)) return;
// 如果已经存在该类直接返回
if (e.className) c = " " + c;
e.className += c;
};
CSSClass.remove = function(e, c)
{
if (typeof e == "string") e = document.getElementById(e); // element id
// Search the className for all occurrences of c and replace with "".
// \s* matches any number of whitespace characters.
// "g" makes the regular expression match any number of occurrences
e.className = e.className.replace(new RegExp("
\\b"+ c+"
\\b\\s*", "g"), "");
};
4.直接操作外部的式样文件
有两种方法可以直接操作外部式样表.(1)在html中的link和script在javaScript中有一个disabled属性[html中没有对应的属性],可以设置它为true或false来启用或停用对应的式样表文件.(2)方法可以直接操作式样表,但是较为复杂和不常用,详细信息参看 JavaScript: The Definitive Guide, 5th Edition 16.6.2节
相关推荐
“JavaScript操作CSS”课堂教学设计.pdf
NULL 博文链接:https://zhouxianglh.iteye.com/blog/588385
本文实例讲述了js操作css属性实现div层展开关闭效果的方法。分享给大家供大家参考。具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象...
一、使用js操作css属性的写法 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2、对于含有中划线的css属性,将每个中划线...
javascript操作Div和Css 网页开发必备
js操作css3属性的两种方法,字符串和正则表达式各一种
jsstyle 尝试在一个对象中定义所有 CSS,然后循环遍历它以将其应用于 DOM。 当媒体查询存在时并不是很有用,但它可能是另一个 CSS 处理库的开始。
有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然是可以的。具体的方法看下面的实现代码吧
java开发中压缩js,css文件 给定js或css文件 直接输出压缩后的内容或文件.有注释,易操作.
今天因需要用到js获取css属性,网上搜了半天都不合适的。有一下几种方法
虽说jquery支持css选择器,可以把一些css规则放在js里,js无论如何是比css灵活的。但是js修改的是dom的htmlelement的stlye,是一个操作而非规则。
js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。js条件下多次触发同一个css3动画的解决方案demo,配合blog一起使用。
许愿墙,可拖拽,可隐藏,操作方便,适合新手使用和模仿,纯js+css效果
HTML、JS及CSS面试与操作.docx
Js CSS仿Windows桌面菜单及图标的效果,用到了不少Ajax操作相关技巧,table 目录下是做得稍复杂一点的类似桌面效,test 目录是简单的,自己看吧 调用方法如: a onclick="win('div1','标题','demo.htm','500','...
通过使用HTML建立框架,JavaScript建立逻辑连接,css进行美化操作,实现一个空调遥控器的界面。 包含:空调开关,温度调节,模式调节,风速调节
今天有个朋友在weibo上问我可不可以用JS和CSS让页面每次刷新随机产生一张背景图,当然我的回答是可以的。具体可以这样做: 1、用JS定义一个图片数组,里面存放你想要随机展示的图片 代码如下: var imgArr=[...