问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

html中onClick HTML事件不能被触发

头像
JamesChan
    251510
    头像
    某熊猫桑
      16.1k61547
      1. 如题

      2. 上代码：

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
<!--
.mainfram{font-size:12px;}
.mainfram span
{
    cursor:hand;
    color:blue;
}
.afont{font-size:20px; color:blue;}
.bfont{font-size:16px; color:green;}
-->
</style>

</head>

<body id="contentfram">
<div class="mainfram">
    <span onclick= "contentfram.className='afont';">大字体</span>    |
    <span onclick= "contentfram.className='bfont';">小字体</span>    
</div>

</body>
</html>
      3. 单击“大字体”“小字体”都无反应。
        另外鼠标停留在“大字体”“小字体”并没有CSS样式中的hand
      4. 出处:《新手学HTML+CSS》P262 示例16.1
      htmlcss
      阅读 5.1k
      4 个回答
      得票最新
      头像
      chwech
        47211018
        ✓ 已被采纳

        afont和bfont类是已经添加成功的, 但是你是加在了body上, 所以样式是继承body的, 权重太低, 使用的是你设定的样式, 所以看不出效果.

        <!DOCTYPE html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>

    <style>
        .mainfram {
            font-size: 12px;
        }

        .mainfram span {
            cursor: hand;
        }

        .afont {
            font-size: 20px;
            color: red;
        }

        .bfont {
            font-size: 16px;
            color: green;
        }
    </style>

</head>

<body id="contentfram">
    <div class="mainfram">

        <span onclick="this.className='afont';">大字体</span> |
        <span onclick="this.className='bfont';">小字体</span>
    </div>

</body>

</html>

        这样试试, 这样加在span上, 友情提示: this关键字在javascript是极其重要, 要重点掌握

        头像
        Yujiaao
          12.7k62146

          试试改成下面这样

          onclick= "javascript:document.getElementById('contentfram').className='afont';"

          同时要提高样式的权重

          .afont span {font-size:20px; color:blue;}
.bfont span {font-size:16px; color:green;}

          参考@xianshenglu的答案

          头像
          xianshenglu
            4.5k21727

            本着最小化修改题主代码的原则，提出2点修改建议：

            1、鼠标停留在“大字体”“小字体”并没有CSS样式中的hand
            cursor:pointer;/*似乎没有hand 这个值，一直用的是pointer，可能以前有过 hand 这个值*/

            MDN 上的解释：

            clipboard.png

            2、单击“大字体”“小字体”都无反应。
            .afont span{font-size:20px; color:blue;}
.bfont span{font-size:16px; color:green;}

            .afont，.bfont 后面了加了一个标签名，让权重和上面相等，这样同等权重下后面才能覆盖前面的。能明白？

            解释：css 样式重复时，覆盖至少有三条原则，

            1、权重高的覆盖权重低的

            权重本身有好几个等级，大概是：ID选择器最高（如#contentfram），class 选择器其次（如.mainfram），标签选择器再其次（如span），继承样式没有权重（自身没有设定样式，但是因为父元素设置了，所以继承了）。

            所以原来代码.mainfram span 权重 > .afont；导致 .afont 的样式虽然在后面也不会覆盖前面的，因为权重低。如果改成 .bfont span ，二者权重相等，结合就近原则，后面的就覆盖了前面的样式；

            2、就近原则：后面的覆盖前面的，离 html 近的覆盖离 html 远的

            3、!important,这个一般不用，详情自行了解；

            建议：如果初学 html ，不建议太关注 css 样式，因为 css 也是很繁杂的一部分，如果再和 js 一起学的话，估计会受挫不少，可以尝试，先学 html，学到觉得可以了，单独攻 css，再攻 js，一起学容易错，并且没有精力去全部搞清楚，特别是 css 和 js 单独拎出来东西很多，一句两句讲不清楚，容易让人丧失信心；

            css 权重如果不太理解，可以参考CSS权威指南-中-第3版，js 放在 html 中的用法很少，属于历史遗留，大概了解就行了，一般都不这么写，所以你会发现很多答主怀疑你的 js 代码有问题，实际上不是的。

            头像
            fantasy525
              58663955

              我学了这么久了，从来没在onclick里面写过详细的逻辑，你还是先获取span这个dom对象，再绑定事件吧

              document.getElementById('contentfram').onclick=function(){你想干的事}
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题