JavaScript-DOM操作HTML、CSS

最新推荐文章于 2023-09-05 14:28:51 发布

Vip宅男

最新推荐文章于 2023-09-05 14:28:51 发布

阅读量278

点赞数

分类专栏： Java Web开发实战

Java Web开发实战专栏收录该内容

24 篇文章 0 订阅

订阅专栏

JavaScript能够改变页面中所有HTML元素、属性、CSS样式，能对页面中的所有事件做出反应。

DOM可以操作HTML，也可以操作CSS。

DOM操作HTML

通过id找到HTML元素：document.getElementById(" ");

通过标签找到HTML元素：document.getElementByTagName(" ");如果有很多个同样的标签，那么找到的标签是相同标签下的第一个。

改变属性则是innerHTML

之前用过document.write("")，但是值得注意的是，一旦使用了这个语句，则会覆盖之前的所有文档。

如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>改变属性则是innerHTML</title>
    <script type="text/javascript">
        function change(){
            document.write("点击改变之后,会覆盖之前的所有内容")
        }
    </script>
</head>
<body>
<p>点击按钮前正常显示的一段文字</p>
<p>家里煤气泄露了，忽然想起老师说的面对危险首先要让自己冷静，于是我做了几次深呼吸，结果煤气中毒了。</p>
<p>你遇过最糟糕的追求方式是什么</p>
<p>早上6点在宿舍楼下放1000响鞭炮</p>
<P><input type="button" value="改变" οnclick="change()"/></P>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>改变图片</title>
    <script>
        function change(){
            document.getElementById("demo").src="images/2.jpg"
        }
    </script>
</head>
<body>
<img id="demo" src="images/1.gif" alt="无此图片"/>
<p><input type="button" value="下一张" οnclick="change()"/></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM-操作-CSS</title>
    <style>
        .color{
            background: yellow;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="demo" class="color">

</div>
<p><input type="button" value="改变颜色" οnclick="change()"/></p>
<script>
    function change(){
        document.getElementById("demo").style.background="blue"
    }
</script>
</body>
</html>

js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM-改变样式(style)</title>
    <script>
        function text1(obj){
            if(obj.value=="黑色"){
                /*获取div1*/
                var div1=document.getElementById("div1");
                div1.style.backgroundColor="black";
            }
            if(obj.value=="红色"){
                /*获取div1*/
                var div1=document.getElementById("div1");
                div1.style.backgroundColor="red";
            }
        }
    </script>
</head>
<body>
<div id="div1" style="width: 400px;height: 300px;background-color: red">div1</div>
<input type="button"value="黑色" οnclick="text1(this)"/>
<input type="button"value="红色" οnclick="text1(this)"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function add(){
            var selObj=document.getElementById("sel");
            var valObj=document.getElementById("val");
            var texObj=document.getElementById("tex");
            /*关键是这几句*/
            var Option=document.createElement("Option")
            Option.value=valObj.value;
            Option.text=texObj.value;

            selObj.options.add(Option);
        }
    </script>
</head>
<body>
<select id="sel"></select>
<p>value: <input type="text" id="val"/></p>
<p>text: <input type="text" id="tex"/></p>
<p><input type="button" value="增加" οnclick="add()"/></p>
</body>
</html>

Vip宅男

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript-DOM操作HTML、CSS

JavaScript能够改变页面中所有HTML元素、属性、CSS样式，能对页面中的所有事件做出反应。 DOM可以操作HTML，也可以操作CSS。DOM操作HTML 通过id找到HTML元素：document.getElementById(" "); 通过标签找到HTML元素：document.getElementByTagName("
复制链接

扫一扫

专栏目录