＜Dom学习＞

最新推荐文章于 2024-07-22 15:13:59 发布

好先生·

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量87

点赞数

分类专栏： Dom操作文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45540964/article/details/111240429

版权

Dom操作专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box{}
        #div1{}
    </style>
    <script type="text/javascript">
        /*
            DOM: document object model(文档对象模型)
                节点类型:
                    元素节点 <div></div>
                     属性节点 id='div1'
                     文本节点 div文本

        元素节点获取
         document.getElementById(id)
            通过id获取符合条件的元素(id必须是唯一的)
            返回值:符合条件的节点

        */
       window.onload = function()
       {
            //整个界面加载完成后才会执行

            //获取元素
            var oDiv=document.getElementById("div1");

            //获取元素行间属性值
            document.write(oDiv.id+"</br>");
            document.write(oDiv.title+"</br>");

            //访问class需要通过className访问
            document.write(oDiv.className+"</br>");


            //访问样式值
            //只能访问标签行间的样式
            //不能访问外联的样式
            document.write(oDiv.style.width);
            document.write(oDiv.style.height);
             //如果样式值中有 - ，需要改变写法 - 后字母大写
             //background-color --> backgroundColor)
             document.write(oDiv.style.backgroundColor);

            //设值可使用等号
            oDiv.id="div2";
            oDiv.style.backgroundColor='blue';
       }

    </script>
</head>
<body>

<div id='div1' title="hello" class="box" style="width:300px;height:300px;background-color: green"> div文本 </div>

</body>

</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜Dom学习＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> .b
复制链接

扫一扫

专栏目录