JavaScript操作节点和void运算符（八）

最新推荐文章于 2023-02-06 08:28:19 发布

changuncle

最新推荐文章于 2023-02-06 08:28:19 发布

阅读量329

点赞数 2

分类专栏： JavaScript 文章标签： javascript api void attribute

本文链接：https://blog.csdn.net/xiaouncle/article/details/79830375

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

还剩最后两个，JavaScript的基本内容就算是告一段落了，我当然知道这很不全面，但是掌握这些+会查API就足够应付一般的问题了，像js中的原型、闭包等高级一些的知识点，等以后用到的时候再去深入研究也不迟。

一、js操作节点

js中的知识点有很多，对于初学者来说不可能一下全都记住，那就先把一些常用的内容记在心里，然后再完善自己的知识库，下面展示的是操作页面属性的常用方法。

<head>
    <title></title>
    <script type="text/javascript">
        function change(){
            var userName = document.getElementById("userName");
            userName.className="lala";
            userName.value="改好了";
            //js获取元素中的属性
            alert("color="+userName.getAttribute("color"));//color=blue
            alert("myAttr="+userName.getAttribute("myAttr"));//myAttr=one
            //js设置元素中的属性
            userName.setAttribute("color","red");
            userName.setAttribute("myAttr","two");
            userName.style.cursor="pointer";
        }
    </script>
</head>
<body>
    <input type="text" id="userName" class="huhu" style="cursor:default;" color="blue" myattr="one" value=""/>
    <input type="button" value="改起来" onclick="change()"/>
</body>

页面刚打开时的截图如下：
这里写图片描述
点击“改起来”按钮后的截图如下：

二、void运算符

void()可以保留超链接的样式，而且点击超链接之后不会进行页面跳转，有点意思吧。
下面的代码< body>中有很多换行符，所以页面打开后会出现纵向的滚动条。如果href=”#”的话，点击之后虽然不会跳转到其他页面，但是会跳转到本页面的顶部；如果href=”javascript:void(0)”的话，那点击之后就既不会跳转到其他页面，也不会跳转到本页面的其他位置，这就是void()运算符的作用。

<head>
    <title>JS代码void运算符</title>
    <script type="text/javascript">     
        function sayHello(){
            alert("Hello");
        }
    </script>
</head>
<body>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br>
    <!--保留超链接的样式，不进行页面跳转-->
    <a href="javascript:void(0)" onclick="sayHello()">超链接</a>
</body>

上面的例子，onclick事件句柄绑定的函数会正常触发，而且点击之后不会进行页面跳转。
这里写图片描述

changuncle

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
3
评论
JavaScript操作节点和void运算符（八）

还剩最后两个，JavaScript的基本内容就算是告一段落了，我当然知道这很不全面，但是掌握这些+会查API就足够应付一般的问题了，像js中的原型、闭包等高级一些的知识点，等以后用到的时候再去深入研究也不迟。一、js操作节点js中的知识点有很多，对于初学者来说不可能一下全都记住，那就先把一些常用的内容记在心里，然后再完善自己的知识库，下面展示的是操作页面属性的常用方法。&lt;...
复制链接

扫一扫