当按钮 onclick 和（如果可能）从更改 colors 时排除某些文本或元素时更改文本颜色 onclick

Question

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

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>

ZC7A62 8CBA22E28EB17B5F5C6AE2A266AZ https://jsfiddle.net/epq6s70f/

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

Answer 1

为按钮添加单击处理程序changeColor并提供您想要更改一些 class 的元素。 没有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>

Answer 2

1. 从创建一个按钮开始。
2. 为所有包含文本的“div”元素赋予 class 名称。
3. 创建一个 CSS class 属性更改背景颜色或文本颜色或任何您想要的这些分区。
4. select 使用 javaScript 中的“document.querySelectorAll”方法使用其 class 名称的那些部门。
5. Now add the CSS class you created to those divisions using (document.querySelector('class name').classList.add('Here, mention that CSS class that you created to change the colour earlier').
6. 您必须在按钮上添加事件侦听器

Answer 3

这是如何在正文中处理所有文本的示例。

 $( "#red" ).click(function() { document.body.style.color = "red"; }); $( "#blue" ).click(function() { document.body.style.color = "blue"; }); $( "#green" ).click(function() { document.body.style.color = "green"; }); $( "#black" ).click(function() { document.body.style.color = "black"; });

 <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="changecolor"> some text in the div <ul> <button id="red" type="button" class="redbutton" style="background-color:red"></button> <button id="blue" type="button" class="bluebutton" style="background-color:blue"></button> <button id="green" type="button" class="greenbutton" style="background-color:green"></button> <button id="black" type="button" class="blackbutton" style="background-color:black"></button> </ul> <p>some text</p> </div> </body>

Answer 4

在这里，您可以选择使用原生 Javascript。

首先，您使用document.getElementsByTagName获得所有按钮，然后遍历它们中的每一个并获得它们的 class。

通过继续获取他们的 class，您可以在出现“按钮”一词时拆分字符串。

在此拆分之后，您可以只取颜色的名称并将其传递给您想要在 DOM 中的任何元素。

 let buttons = document.getElementsByTagName("button"); let body = document.getElementsByClassName("changecolor")[0]; for(var i = 0; i< buttons.length; i++){ let button = buttons[i]; let color; button.addEventListener("click", function(){ color = button.className.toString(); color = color.split("button")[0]; body.style.color = color; }); }

 .redbutton, .bluebutton, .greenbutton, .blackbutton{ padding: 10px; cursor:pointer; color: white; font-weight: bold; font-size: 12px; }.footer { position: fixed; bottom: 0; left: 0; }

 <body> <div class="changecolor"> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <p>Lorem ipsum</p> <ul> <button type="button" class="redbutton" style="background-color:red">Change color</button> <button type="button" class="bluebutton" style="background-color:blue">Change color</button> <button type="button" class="greenbutton" style="background-color:green">Change color</button> <button type="button" class="blackbutton" style="background-color:black">Change color</button> </ul> </div> <div class="footer"> <p>Hakcipta & Copy 2020 @ AidilQayyim Sistem Kuiz FizikMudah!</p> </div> </body>

我希望这可以给你一个提示你的问题。 干杯