JavaScript 获取元素及事件

最新推荐文章于 2024-05-19 21:53:49 发布

苦涩2020

最新推荐文章于 2024-05-19 21:53:49 发布

阅读量2k

点赞数 7

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/UserPython/article/details/106843461

版权

本文详细介绍了JavaScript中获取元素的各种方法，包括使用ID、内容、属性、样式和类名等，并探讨了事件的基本概念、事件绑定、事件处理函数以及各种类型的事件，如鼠标、键盘和剪贴板事件。同时，还讲解了事件对象、冒泡和捕获机制，以及this在事件中的应用。

摘要由CSDN通过智能技术生成

使用ID获取元素对象

document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null

获取或设置元素内容

元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签

<div id="zxw">id选择器</div>
<script>
    var zxw = document.getElementById("zxw");
    alert(zxw);//获取
    zxw.innerText = "设置新内容";
</script>

元素对象.innerHTML= “文本”：返回或设置标签内的HTML内容，包含HTML标签

<div id="zxw">id选择器</div>
<script>
    var zxw = document.getElementById("zxw");
     alert(zxw);//获取
    zxw.innerText = "<b>设置新内容</b>";
</script>

获取或设置元素属性

元素对象.属性名 = “属性值”;：获取或设置元素属性

    <input type="text" id="zxw" value="设置元素属性">
    <script>
        var zxw = document.getElementById("zxw");
        // 获取元素属性
        alert(zxw.id);
        alert(zxw.type);
        alert(zxw.value);
        // 设置元素属性
        zxw.type = "button";
        zxw.value = "按钮";
        // 添加元素属性
        zxw.title = "我是添加的属性";
    </script>

通用方法获取或设置元素属性

元素对象.getAttribute(“属性名”)：获取元素指定的属性
元素对象.setAttribute(“属性名”, “属性值”)：设置元素指定属性的值
元素对象.removeAttribute()：移除元素指定的属性

    <input type="text" id="zxw" class="ZZ" value="设置元素属性" abc="111">
    <script>
        var z = document.getElementById("zxw");
        // 获取任意属性
        alert(z.getAttribute("abc"));
        alert(z.getAttribute("class"));
        alert(z.getAttribute("value"));

        // 设置元素属性
        z.setAttribute("type", "button");
        z.setAttribute("value", "按钮");

        // 添加元素属性
        z.setAttribute("title", "新添加的属性");

		// 移除元素属性
        z.onclick = function(){
    
            z.removeAttribute("value");
        }
    </script>

获取或设置元素行内样式

元素对象.style.属性名 = “属性值”：获取或设置元素行内样式

    <div id="z" style="color: red; font-size: 24px;">获取和设置元素行内样式</div>
    <script>
        var z = document.getElementById("z");
        //方式一：获取元素行内样式
        // alert(z.style.cssText);
        // 方式一：设置元素行内样式,会对行内样式重置
        // z.style.cssText = "color:blue; font-size:50px;"

        // 方式二：获取元素行内某个样式
        alert(z.style.color);
        // 方式二：设置元素行内某个样式
        // 当行内样式中的属性名有"-"的，应使用驼峰命名法
        z.style.color = "blue";
        z.style.fontSize = "50px";
    </script>

添加或删除元素类名

元素对象.classList.add(“类名1”, “类名2”);：添加元素类名
元素对象.classList.remove(“类名1”, “类名2”);：删除元素类名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .cz1{
    color: black; font-size: 16px;}
        .cz2{
    color: red; font-size: 24px;}
        .cz3{
    width: 200px; height: 100px; border: 2px solid black;}
    </style>
</head>
<body>
    <div id="z" class="cz1">添加和删除元素类名</div>
    <script>
        var z = document.getElementById("z");
        // 添加元素类名
        z.classList.add("cz2", "cz3");

        // 删除元素类名
        z.classList.remove("cz2", "cz3");
    </script>
</body>
</html>

元素类名的切换

元素对象.toggle(“类名”)：元素类名的切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style type="text/css">
        .cz1{
    color: black; font-size: 16px;}
        .cz2{
    color: red; font-size: 24px;}
    </style>
</head>
<body>
    <div id="z" class="cz1">添加和删除元素类名</div>
    <script>
        var z = document.

最低0.47元/天解锁文章

苦涩2020

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 获取元素及事件

使用ID获取元素对象document.getElementById( “ID” );：返回文档中一个指定ID的元素对象，用于精确获取；若找到则返回该元素对象，否则返回null获取或设置元素内容innerText方法元素对象.innerText = “文本”：返回或设置标签内的文本值，不包含HTML标签<div id="zxw">id选择器</div><script> var zxw = document.getElementById("zxw.
复制链接

扫一扫