dom修改css样式,js修改div样式

关于DOM节点CSS属性的设置问题

createTextNode 会输出全部文本, 可以在它的容器上添加样式.

即 headerrow.insertCell(0) 时添加样式

将

headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));

修改为以下格式,

方法一

var element = headerrow.insertCell(0)

element.appendChild(document.createTextNode("姓名"));

element.style.cssText = "color:#FF0000;font-size:24px;"

或者将样式写进 css 文件,设置元素的 className:

方法二

var element = headerrow.insertCell(0)

element.appendChild(document.createTextNode("姓名"));

element.className = class;

或者用 "太极八卦饼" 的方法:

方法三

var element = headerrow.insertCell(0)

element.appendChild(document.createTextNode("姓名"));

element.style.fontSize= "30px";

element.style.color = "#FF0000";

.....

方法二通用性好一些, 只需要写一份CSS, 可以供后面的代码重用, 而且代码进行了分离.

其它的两个处理方法类似

方法一也可以样式文本存入变量, 在当前 js 中实现重用.

var cssText = "color:#FF0000;font-size:24px;"

var element = headerrow.insertCell(0);

element.appendChild(document.createTextNode("姓名"));

element.style.cssText = cssText;

element = headerrow.insertCell(1);

element.appendChild(document.createTextNode("年龄"));

element.style.cssText = cssText;

element = headerrow.insertCell(2);

element.appendChild(document.createTextNode("性别"));

element.style.cssText = cssText;

相关问答

Q1: 有哪项方式可以对一个DOM设置它的CSS样式？

?外部样式表，引入一个外部css文件

?内部样式表，将css代码放在 head 标签内部

?内联样式，将css样式直接定义在 HTML 元素内部

对DOM设置它的CSS样式的话，建议到黑马程序员社区找到相关的教程，内涵详细的操作流程和教学，非常适合学习。我当初在找前端工作之前，就是刷的他们的面试题，里面原理都说的很清楚。适合学习

Q2: 理解DOM如何操作CSS样式

我们知道DOM部分其实就是浏览器各大厂商提供的一些列方法和属性的集合，这一系列的属性和方法也被称为接口，这些接口可以让我们更加方便的操作HTML和XML，注意我没有说CSS哦

但我们经常会听到js操作css或者脚本化css的说法，那是怎么回事呢？

其实，DOM中提供的方法能操作HTML的所有内容，其中包括能操作元素的属性，而元素的属性中又恰好包含style属性，style属性表示的是该元素行间样式，而且行间样式的权重是1000。所以一般我们通过DOM操作元素的属性style就间接的改变了该元素的CSS样式。

DOM操作CSS样式其实质是通过DOM控制行间样式，从而达到改变样式的效果。这只能说间接的操作CSS，并非真实的直接操作CSS文件

通过DOM元素的style读写CSS行间样式

格式：ele.style.prop

注：

1. 可读可写行间样式，没有兼容性问题

2. 碰到保留字属性，前面应添加css；例如：float--cssFloat

3. 复合属性必须拆解

4. 组合单词变成小驼峰式

5. 写入的值必须是字符串格式

用法比较简单，我们深入看看style吧

先随便来两个元素，并选中

我们发现，dom元素的原型的原型都是HTMLElement。于是猜测，style就是定义在HTMLElement的原型链上，所以凡是DOM元素都有style属性。

通过hasOwnProperty进一步验证看看是否就在HTMLElment的原型上

明白style定义在哪里之后，再来看style里面是什么？

目前也只有这种方式能修改CSS样式。

下面再来了解查询样式的方式：

window.getComputedStyle(ele,null)

IE使用另外一直方式代替

ele.currentStyle

最后我们封装一个所有浏览器都能用的方法：

Q3: 怎么用javascript dom修改css里的id里的属性，是改，不是设置，设置的话覆盖不了原值

//修改id

script type="text/javascript"

document.getElementsByTagName("div").id = 'newid';

/script

//修改css

document.getElementsByTagName("div").style.height = '100px'；

document.getElementsByTagName("div").style.width = '100px'；

......