包含javascript样式的词条

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

javascript 关于样式的小问题

①obj.offsetLeft：只读。指对象obj的左边框border-left(不包含border-left的大小)到定位的父级元素的左填充padding-left(包含padding-left的大小)的距离，当没有定位的父级时，则相对于body。【读取的是数值，没有单位】

②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的。

相关问答

Q1: JavaScript是如何改变网页的CSS样式的？

通常我们将网页的样式和内容分开，样式放在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改变样式的内容，可以看看，希望对你有帮助。

Q2: 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函数

Q3: 如何javascript获取css中的样式

使用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属性是不能获取到元素的完整样式信息的。因此，需要使用元素的计算样式才获取元素的样式信息。

Q4: javascript 改变指定css样式

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" /