码迷,mamicode.com
首页 > 其他好文 > 详细

10.16. document操作属性

时间:2017-10-16 21:43:27      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:class   ntb   body   creat   div   round   color   bsp   tee   

setAttribute("属性名","属性值");修改属性

 

例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    function dj(){
        var sx = document.getElementById("a");
        sx.setAttribute("class","bb");
    }
</script>
<style>
    .aa{
        width: 100px;
        height: 100px;
        background-color: blue;
    }
    .bb{
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>
</head>

<body>
<div id="a" onClick="dj()" class="aa"></div>
</body>
</html>

是把原来div里面的样式aa变成了bb

getAttribute("属性名");是获取标签

removeAttribute("属性名");  是删除标签

 

 

操作样式
元素.style.样式 = " ";

也就是更改元素里面的样式。

创建元素 document.createElement(标签名);

追加元素 元素对象.appendChild(元素对象);

删除元素 元素对象.remove();

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>

    function createEL(){
        var div = document.createElement("div");
        div.setAttribute("id","dd");
        div.style.width = "100px";
        div.style.height = "100px";
        div.style.backgroundColor = "red";
        div.innerHTML = "ggg";
        //追加元素
        var objDiv = document.getElementById("dd");
        objDiv.appendChild(div);
        //把自己删除
        obj.remove();
    }
</script>
</head>

<body>
<button onClick="createEL()">创建</button>
</body>
</html>

10.16. document操作属性

标签:class   ntb   body   creat   div   round   color   bsp   tee   

原文地址:http://www.cnblogs.com/wang95529/p/7678507.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!