CSS-DOM:
style属性是对象类型
nodeName是tring类型
如果文档的内容需要定期编辑和刷新 添加class属性的工作就会变成一种负担
如果文档内容需要一个CMS来处理 给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的
font-size属性要用元素.style.fontSize来检索
考虑纯粹用css还是用DOM设置样式 需要考虑这些问题：
1最简单的解决方案
2.那种解决方案得到更多浏览器的支持
一般改变元素的呈现效果用css
改变某元素的行为用dom
如果是根据行为改变呈现效果 那就要考虑情况了 例子：+
响应事件： 可以使用伪class属性允许我们根据html元素的状态来改变样式 比如
a：hover{
color：#c60；
} 这个伪类基本上只是用来改变链接的样式
利用DOM可以实现 鼠标移动到某表格的行时字体加黑加粗
function rowsd(){
if(!document.getElementByTagName) return false;
var rows=document.getElementByTagName("tr");
for(var i=0;i<rows.length;i++){
rows[i].onmouseover=function(){
this.style.fontWeight="bold"; //指当前行
}
rows[i].onmouseout=function(){
this.style.fontWeight="normal";
}
)
}
addLoadEvent(rowsd);
元素的属性style只有在内联的时候才可以检索 如果script放在head或者css外部调用的时候 style是无法获取信息的
但是 还可以通过style来设置各种html呈现效果 是可以用style检索的 你用dom设置的样式也可以用dom来检索 举例：
function getNextElement(node) {
if(node.nodeType == 1) {
return node;
}
if (node.nextSibling) {
return getNextElement(node.nextSibling);
}
return null;
}
function xx(){
var headers=document.getElement("h1");
for(var i;i<headers.length;i++){
var elem=getNextElement(headers[i].nextSibling);
elem.style.fontWeight="bold";
elem.style.fontSize="1.2em"; //通过DOM来设置css 就可以通过style来检索了
}
}
在事件发生时设置有关元素的样式
根据某种条件反复设置某种样式
html:
<body>
<table>
<caption>Itinerary</caption>
<thead>
<tr>
<th>When</th>
<th>Where</th>
</tr>
</thead>
<tbody>
<tr>
<td>June 9th</td>
<td>Portland, <abbr title="Oregon">OR</abbr></td>
</tr>
<tr>
<td>June 10th</td>
<td>Seattle, <abbr title="Washington">WA</abbr></td>
</tr>
<tr>
<td>June 12th</td>
<td>Sacramento, <abbr title="California">CA</abbr></td>
</tr>
</tbody>
</table>
</body>
css：
body {
font-family: "Helvetica","Arial",sans-serif;
background-color: #fff;
color: #000;
}
table {
margin: auto;
border: 1px solid #699;
}
caption {
margin: auto;
padding: .2em;
font-size: 1.2em;
font-weight: bold;
}
th {
font-weight: normal;
font-style: italic;
text-align: left;
border: 1px dotted #699;
background-color: #9cc;
color: #000;
}
th,td {
width: 10em;
padding: .5em;
}
.odd {
background-color: #ffc;
}
js：
function stritable(){
if(!document.getElementByTagName) return false;
var tables=document.getElementByTagName("table");
var odd,rows;
for(var i=0;i<tables.length;i++){
odd=false;
rows=tables[i].getElementByTagName("tr");
for(var j=0;j<rows.length;j++){
if(odd){
rows[i].style.backgroundColor="#ffc";
odd=false;
}else{
odd=true;
}
}
}
}
但是这样子 如果需要修改就需要寻找这个函数 然后修改 比较麻烦
可以采用这个方法：
elem.setAttribute("class","intro");
也可以用 className属性完成 元素节点才有
元素.className=value；
这样 在value样式类中修改即可
可是这样子就是直接覆盖掉了
如果想要追加可以这样
elem.className+=" intro"; intro前面有空格
现在css样式里面添加一i套声明 这样只要修改add就可以来改变样式了
.add{
background-color:#ffc;
}
举例：function stripeTables() {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],"odd");
odd = false;
} else {
odd = true;
}
}
}
}
function addClass(element,value) {
if (!element.className) {
element.className = value;
} else {
newClassName = element.className;
newClassName+= " ";
newClassName+= value;
element.className = newClassName;
}
}
addLoadEvent(stripeTables);
要学会对函数进行抽象 可以增加通用性 如：
function stripeTables(Tag,Name) {
if (!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName(Tag);
for (var i=0; i<tables.length; i++) {
var odd = false;
var rows = tables[i].getElementsByTagName("tr");
for (var j=0; j<rows.length; j++) {
if (odd == true) {
addClass(rows[j],Name);
odd = false;
} else {
odd = true;
}
}
}
}dom修改css样式
2018-02-08
3307
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
CSS-DOM:style属性是对象类型nodeName是tring类型如果文档的内容需要定期编辑和刷新 添加class属性的工作就会变成一种负担 如果文档内容需要一个CMS来处理 给文档内容的个别部分添加class属性或者其他样式的做法有时是不被允许的font-size属性要用元素.
目录
相关文章
|
23天前
|
前端开发
如何设置 CSS 盒子模型的边框样式？
CSS盒子模型的边框样式可以通过`border`属性设置，包括边框宽度、样式和颜色。例如：`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边，如`border-top`、`border-right`等。
47
2
2
|
24天前
|
JavaScript
前端开发
Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
28
1
1
|
11天前
|
前端开发
JavaScript
UED
|
29天前
|
前端开发
JavaScript
|
2月前
|
JavaScript
前端开发
jQuery 操作 DOM 及 CSS
本文介绍了如何使用jQuery进行DOM操作和CSS样式的修改，包括如何获取和设置元素的文本内容、属性值、添加和删除元素，以及如何使用jQuery的addClass、removeClass、toggleClass、hasClass和css方法来操作元素的CSS。通过示例代码，展示了jQuery在实际开发中的便捷性。
34
1
1
|
1月前
|
编解码
前端开发
JavaScript
|
17天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式，通过<head>部分的<style>标签定义；外部样式表适用于多个页面，通过<link>标签引用外部CSS文件；<style>定义样式，<link>引用资源；已弃用的标签有<font>、<center>、<strike>，属性有color和bgcolor。
22
0
0
|
17天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式，以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
13
0
0
|
17天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式，包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式，并提供实例演示。
27
0
0
|
1月前
|
前端开发
Ubuntu
Linux