鍍金池/ 問答/HTML/ html中onClick HTML事件不能被觸發(fā)

html中onClick HTML事件不能被觸發(fā)

  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. 單擊“大字體”“小字體”都無反應(yīng)。
    另外鼠標停留在“大字體”“小字體”并沒有CSS樣式中的hand
  4. 出處:《新手學HTML+CSS》P262 示例16.1
回答
編輯回答
巫婆

我學了這么久了，從來沒在onclick里面寫過詳細的邏輯，你還是先獲取span這個dom對象，再綁定事件吧

document.getElementById('contentfram').onclick=function(){你想干的事}
2018年9月4日 07:24
編輯回答
北城荒

afont和bfont類是已經(jīng)添加成功的, 但是你是加在了body上, 所以樣式是繼承body的, 權(quán)重太低, 使用的是你設(shè)定的樣式, 所以看不出效果.

<!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關(guān)鍵字在javascript是極其重要, 要重點掌握

2017年5月18日 15:38
編輯回答
乖乖瀦

本著最小化修改題主代碼的原則，提出2點修改建議：

1、鼠標停留在“大字體”“小字體”并沒有CSS樣式中的hand
cursor:pointer;/*似乎沒有hand 這個值，一直用的是pointer，可能以前有過 hand 這個值*/

MDN 上的解釋：

clipboard.png

2、單擊“大字體”“小字體”都無反應(yīng)。
.afont span{font-size:20px; color:blue;}
.bfont span{font-size:16px; color:green;}

.afont，.bfont 后面了加了一個標簽名，讓權(quán)重和上面相等，這樣同等權(quán)重下后面才能覆蓋前面的。能明白？

解釋：css 樣式重復時，覆蓋至少有三條原則，

1、權(quán)重高的覆蓋權(quán)重低的

權(quán)重本身有好幾個等級，大概是：ID選擇器最高（如#contentfram），class 選擇器其次（如.mainfram），標簽選擇器再其次（如span），繼承樣式?jīng)]有權(quán)重（自身沒有設(shè)定樣式，但是因為父元素設(shè)置了，所以繼承了）。

所以原來代碼.mainfram span 權(quán)重 > .afont；導致 .afont 的樣式雖然在后面也不會覆蓋前面的，因為權(quán)重低。如果改成 .bfont span ，二者權(quán)重相等，結(jié)合就近原則，后面的就覆蓋了前面的樣式；

2、就近原則：后面的覆蓋前面的，離 html 近的覆蓋離 html 遠的

3、!important,這個一般不用，詳情自行了解；

建議：如果初學 html ，不建議太關(guān)注 css 樣式，因為 css 也是很繁雜的一部分，如果再和 js 一起學的話，估計會受挫不少，可以嘗試，先學 html，學到覺得可以了，單獨攻 css，再攻 js，一起學容易錯，并且沒有精力去全部搞清楚，特別是 css 和 js 單獨拎出來東西很多，一句兩句講不清楚，容易讓人喪失信心；

css 權(quán)重如果不太理解，可以參考CSS權(quán)威指南-中-第3版，js 放在 html 中的用法很少，屬于歷史遺留，大概了解就行了，一般都不這么寫，所以你會發(fā)現(xiàn)很多答主懷疑你的 js 代碼有問題，實際上不是的。

2018年4月16日 12:56
編輯回答
安若晴

試試改成下面這樣

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

同時要提高樣式的權(quán)重

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

參考@xianshenglu的答案

2017年5月17日 05:31