时间戳

首页 > 解决方案 > 在单击按钮时更改文本颜色，并（如果可能）在单击时从更改颜色中排除某些文本或元素

javascript - 在单击按钮时更改文本颜色，并（如果可能）在单击时从更改颜色中排除某些文本或元素

问题描述

如何制作一个按钮，何时onclick更改页面上的所有文本更改颜色，包括 div 内或 div 外的文本。如果可能的话，我可以从更改颜色中排除某些文本，例如页脚或文本链接吗？

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/all.css"></link>
</head>
<body>
<div class="changecolor">
<ul>
<button type="button" class="redbutton" style="background-color:red"></button>
<button type="button" class="bluebutton" style="background-color:blue"></button>
<button type="button" class="greenbutton" style="background-color:green"></button>
<button type="button" class="blackbutton" style="background-color:black"></button>
</ul>
</div>
<div class="registerbox">
    <div class="inner-registerbox">
    <div class="registerbox-icon"><i class="fas fa-user-plus"></i></div>
        <div class="registerbox-front">
            <h2>BORANG PENDAFTARAN MURID</h2>
            <form method='POST' action=''>
            <form>
            <div class="box-firstline">
                <label for="idmurid">ID Murid</label> <br /> 
                <input type="text" name="idmurid" class="input-box2" required>
            
                <label for="namamurid">Nama Murid</label> <br /> 
                <input type="text" name="namamurid" class="input-box3" required>
            </div>
            <div class="box-secondline">
                <label for="namakelas">Nama Kelas</label> <br /> 
                <input type="text" name="namakelas" class="input-box2" required>

                <label for="katalaluan_murid">Kata Laluan</label> <br /> 
                <input type="password" name="katalaluan_murid" class="input-box3" required minlength='5' required maxlength='20' required>

                <label>Kata Laluan Sekali Lagi</label> <br /> 
                <input type="password" name="katalaluan_murid2" class="input-box3" required minlength='5' required maxlength='20' required>
            
            </div>
            <input type='submit' value='Daftar' class="registerbutton">

            <p>Sudah mempunyai akaun? <a href="index.php">Log Masuk</a></p>
        </div>
    </div>
</div>

<?PHP include('footer.php');?>
</body>
</html>

css https://jsfiddle.net/epq6s70f/

页脚 https://jsfiddle.net/9poqgzxr/

标签： javascripthtml

解决方案

为按钮添加单击处理程序changeColor，并为要更改某些类的元素提供。没有allow-change该类的其他所有内容都将被忽略。

function changeColor(color){
  $('.allow-change').css('color', color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="changecolor">
<ul>
<button type="button" class="redbutton" style="background-color:red; width: 20px; height: 10px;" onclick="changeColor('red')"></button>
<button type="button" class="bluebutton" style="background-color:blue; width: 20px; height: 10px;" onclick="changeColor('blue')"></button>
<button type="button" class="greenbutton" style="background-color:green; width: 20px; height: 10px;" onclick="changeColor('green')"></button>
<button type="button" class="blackbutton" style="background-color:black; width: 20px; height: 10px;" onclick="changeColor('black')"></button>
</ul>
</div>
<p class="allow-change">This text color can be changed</p>
<p>This text color cannot be changed</p>
</body>

推荐阅读