DOM操作与样式调整-优快云博客

本文链接：https://blog.youkuaiyun.com/php398893944/article/details/7307952

1)className属性可设置或返回元素的 class 属性。

function getClass(){

document.getElementById("d1").className="bbb";

alert(document.getElementById("d1").className);

}

2)removeChild()删除某个对象的子节点。

例1：function delTable(){

//获得table

var tr=document.getElementsByTagName("tr");

//获得table

var table=tr[0].parentNode;

根据table删除tr 移除最后一行

table.removeChild(tr[tr.length-1]);

}

例2：

function deltable(did){

//did为input的id

var input=document.getElementById(did);

var table=input.parentNode.parentNode.parentNode;

table.removeChild(input.parentNode.parentNode);

}

#aa{

cursor:pointer;//鼠标变成手

}

#div{

overflow:auto;//如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

overflow:hidden;元素是不可见的。

visible 默认值。元素是可见的。

}

table{

border-collapse:collapse;

设置表格的边框是否被合并为一个单一的边框

border-collapse:separate 默认值。边框会被分开。

}

function changecolor(trNode){

//alert(trNode.tagName);

//把原来的颜色，先另存一下

color=trNode.className;

//将当前行设定为over

trNode.className="over";

}

function out(trNode){

trNode.className=color;

}

4)通过js设置html背景颜色

function changeColor(color){

//设置背景颜色

document.bgColor=color;

}

5)通过js设置div中文字大小

//js函数

function changeSize(size){

document.getElementById("content").style.fontSize=size;

}

//div

<div id="content">测试字体大小</div>

案例：dom设置字体大小、背景颜色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

.k1{

height:10px;

width:10px;

border:1px #00F solid;

margin:2px;

float:right;

/*鼠标变成手*/

cursor:pointer;

}

span{

cursor:pointer;

}

</style>

function changeColor(color){

//设置背景颜色

document.bgColor=color;

}

function changeSize(size){

//获取div对象

document.getElementById("content").style.fontSize=size;

}

</script>

</head>

<body>

关于英语四级包过秘籍<br>

</div>

</body>

</html>

dom-小知识点