①obj.offsetLeft:只读。指对象obj的左边框border-left(不包含border-left的大小)到定位的父级元素的左填充padding-left(包含padding-left的大小)的距离,当没有定位的父级时,则相对于body。【读取的是数值,没有单位】
成都创新互联公司长期为超过千家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为茄子河企业提供专业的网站建设、成都网站建设,茄子河网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。
②obj.style.left:通过style属性,只能读取标签中style属性中的样式,不能读取外部CSS或内部的非行间样式,所以通常是不用它来读取样式的,而是设置样式。说回来,obj.style.left用于设置绝对定位的对象obj的左外边距margin-left(不包含margin-left的大小)到定位的父级元素的左填充padding-left(包含padding-left的大小)的距离,当没有定位的父级时,则相对于body。【赋值时需要加单位】
③这里的定位的父级元素指:包含对象obj 并设置了position为relative、absolute、fixed的元素。
④关于题主中的“没反应”:首先你左边的offsetLeft是数值,右边加了‘px’后是字符串,类型错误,所以没反应
⑤这里有个IE8的Bug:IE8中的offset系列是包括定位父级的border的。
通常我们将网页的样式和内容分开,样式放在css文件,内容放在html文件,当html文件需要用到样式的时候,直接引用css中定义的样式就可以了。其实JavaScript也能使用css文件或直接改变样式的属性来动态的改变网页的样式。
1、JavaScript设置内联样式
改变样式最直接的方法就是改变元素节点的style属性。如:
myElement.sytle.color = “red”;
myElement.sytle.left = “40px”;
myElement.sytle.backgroundRepeat = “repeat-x”;
JavaScript设置内联样式时,采用和css设置样式一样的风格。如设置myElement的color属性时,我们可以赋值任何在css中可以用的值,所以这里除了可以使用”red”,还可以使用”blue”, ”yellow”或十六进制的”#ff0000”。
另外用JavaScript改变网页的属性还需要注意2点:
l JavaScript中采用驼峰命名法:在css中,属性名中的单词之间是用横杠隔开,如font-weight, background-color。但在JavaScript中,横杠可能被认为是减号,所以采用驼峰命名法,单词之间不用横杠,如font-weight在JavaScript中应该写成fontWeight;而background-color写成backgroundColor。
l JavaScript中属性值为字符串:在css中,属性值都写在双引号中,即要用字符串来给css相关属性赋值,同样当属性值有单位时,我们需要将单位也写在字符串中。
2、JavaScript设置外部样式
当你需要改变的样式已经在css文件中定义了,我们也可以用JavaScript直接用定义好的css样式。如下格式:
myElement.className = “someCSSclass”;
同样需要注意几点:
l 不要将className写成class,因为class是JavaScript保留的关键字,我们不能使用。
l 将定义在css中的样式直接赋值给className,就能改变myElement元素的样式。
l 当要删除元素的样式,可以给className属性赋值为空。如:
myElement.className = “”;
教程网 站-秒秒学上的JavaScript课程有一个章节专门讲解JavaScript改变样式的内容,可以看看,希望对你有帮助。
第一步:导入两套css文件
[html]
link rel="stylesheet" type="text/css" title="样式A" href="css/people1.css" /
link rel="alternate stylesheet" type="text/css" title="样式B" href="css/people2.css" /
link rel="stylesheet" type="text/css" title="样式A" href="css/people1.css" /
link rel="alternate stylesheet" type="text/css" title="样式B" href="css/people2.css" /第二步:写切换的js函数
[html]
script type="text/javascript"
var title = "样式A";
function setStyle(){
//只是样式A 和样式B切换
if(title=="样式A"){
title = "样式B";
}else{
title = "样式A";
}
var i,links;
//用dom方法获取所有link元素
links = document.getElementsByTagName("link");
//判断每个link元素中是否含有style字符串 ,用来判断此link元素为样式表link ,同时判断此link是否包含title属性
for(i=0; links[i]; i++){
if(links[i].getAttribute("rel").indexOf("style") != -1 links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled = true;
//再来判断title中是否有指定的title字符串 有则把当前的link设为可视 即激活当前的link
if(links[i].getAttribute("title").indexOf(title) != -1){
links[i].disabled = false;
//alert("ok");
}
}
}
}
/script
script type="text/javascript"
var title = "样式A";
function setStyle(){
//只是样式A 和样式B切换
if(title=="样式A"){
title = "样式B";
}else{
title = "样式A";
}
var i,links;
//用dom方法获取所有link元素
links = document.getElementsByTagName("link");
//判断每个link元素中是否含有style字符串 ,用来判断此link元素为样式表link ,同时判断此link是否包含title属性
for(i=0; links[i]; i++){
if(links[i].getAttribute("rel").indexOf("style") != -1 links[i].getAttribute("title")){
//把所有link设为disabled
links[i].disabled = true;
//再来判断title中是否有指定的title字符串 有则把当前的link设为可视 即激活当前的link
if(links[i].getAttribute("title").indexOf(title) != -1){
links[i].disabled = false;
//alert("ok");
}
}
}
}
/script第三步:在html标签中调用切换的js函数
使用css控制页面有4种方式,分别为行内样式(内联样式)、内嵌式、链接式、导入式。
行内样式(内联样式)即写在html标签中的style属性中,如div style="width:100px;height:100px;"/div
内嵌样式即写在style标签中,例如style type="text/css"div{width:100px; height:100px}/style
链接式即为用link标签引入css文件,例如link href="test.css" type="text/css" rel="stylesheet" /
导入式即为用import引入css文件,例如@import url("test.css")
如果想用javascript获取一个元素的样式信息,首先想到的应该是元素的style属性。但是元素的style属性仅仅代表了元素的内联样式,如果一个元素的部分样式信息写在内联样式中,一部分写在外部的css文件中,通过style属性是不能获取到元素的完整样式信息的。因此,需要使用元素的计算样式才获取元素的样式信息。
javascript改变CSS样式分为局部和全局,分别如下:
一、局部改变样式
有三种方法:直接改变样式、改变className和改变cssText
改变className: document.getElementById('obj').className="…"
改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";
改变直接样式: document.getElementById('obj').style.backgroundColor="#003366″
二、全局改变样式
通过改变外链样式的的href的值实现网页样式的实时切换,也就是"改变模板风格"。
首先需要赋予需要改变的目标一个id,如
代码如下:
link rel="stylesheet" type="text/css" id="css" href="firefox.css" /
调用时很简单,如
代码如下:
span onclick="javascript:document.getElementById('css').href='ie.css'"点我改变样式/span
答:javascript是编写程序的脚本语言,是控制程序流程等功能的,不是什么样式表,样式表是css,叫做层叠样式表,主要是控制网页页面的样式的,比如字体大小,页面颜色等等这些内容。也就