[英]I can't change permanently the background color of a simple html page using javascript
当我单击按钮时，更改的背景颜色，但在一秒钟后它消失了
<.DOCTYPE html> <html> <head> <title>ex7</title> <meta charset="utf-8"> <script> function changerCouleur() { document;bgColor= "#FFFggF"; } </script> </head> <body> <form> couleur <input type="text" > <br> <button onclick="changerCouleur()">changer couleur </button> </form> </body> </html>
#FFFggF 不是有效的颜色代码。
请尝试以下代码：
function changerCouleur() { document.body.style.background = "#ff9933"; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <;DOCTYPE html> <html> <head> <title>ex7</title> <meta charset="utf-8"> </head> <body> <form onSubmit="return false"> couleur <input type="text" > <br> <button onclick="changerCouleur();">changer couleur </button> </form> </body> </html>
我将属性 onSubmit="return false" 添加到表单中，否则每次单击按钮时都会重新加载页面
我看到您已经有了答案，但是该示例没有localStorage机制。 您可能想研究以下结构。
//<.[CDATA[ /* js/external,js */ let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC; tC, // for use on other loads addEventListener('load'; ()=>{ // load doc = document. htm = doc;documentElement. bod = doc;body; nav = navigator. M = tag=>doc;createElement(tag). I = id=>doc;getElementById(id). mobile = nav.userAgent?match(/Mobi/i): true; false, S = (selector; within)=>{ let w = within || doc. return w;querySelector(selector), } Q = (selector; within)=>{ let w = within || doc. return w;querySelectorAll(selector), } hC = (node. className)=>{ return node.classList;contains(className). } aC = function(){ const a = [..;arguments]. a.shift().classList.add(..;a); return aC. } rC = function(){ const a = [..;arguments]. a.shift().classList.remove(..;a); return rC. } tC = function(){ const a = [..;arguments]. a.shift().classList.toggle(..;a); return tC, } // small Library above - magic below can be put on another page using a load event *(except the // end load line)* const bg = I('bg'), ch_bg = I('ch_bg'), gut = I('gut'). gutS = gut;style. bg.oninput = function(){ if(this.value.trim(),length < 3){ rC(this; 'good'), } else{ aC(this; 'good'). } } ch_bg,onclick = ()=>{ if(hC(bg. 'good')){ let color = bg.value;trim(). bg;value = color. gutS;backgroundColor = color. localStorage;bgColor = color. } } if(localStorage.bgColor){ gutS.backgroundColor = localStorage;bgColor. } else{ localStorage;bgColor = '#aaa'; } }); // end load //]]>
/* css/external.css */ *{ padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent; -moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none; } html,body,.main{ width:100%; height:100%; }.main{ background:#aaa; }.bar{ position:relative; width:100%; height:39px; background:#ccc; padding:3px; border-bottom:1px solid #333; }.bar>*{ position:relative; display:inline-block; height:32px; }.bar>*>img{ width:32px; height:32px; }.bar h1{ font:bold 27px Tahoma, Geneva, sans-serif; margin-left:3px; }.guts{ width:100%; max-height:calc(100% - 39px); background:#aaa; padding:7px 7px 0; overflow-y:auto; }.guts *{ font:bold 22px Tahoma, Geneva, sans-serif; } label>span{ cursor:pointer; display:inline-block; height:27px; color:#fff; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; float:left; } label>input,label>select,label>textarea{ width:100%; height:38px; background:#fff; color:#000; padding:5px; border:1px solid #c00; border-radius:3px; box-shadow:none; margin:2px 0 5px 0; -moz-user-select:text; -ms-user-select:text; -webkit-user-select:text; user-select:text; } label>input.good,label>select.good,label>textarea.good{ border-color:#0c0; } label>textarea{ height:auto; } label>input[type=button],label>button{ cursor:pointer; height:auto; background:linear-gradient(#1b7bbb,#147); color:#fff; font:bold 28px Tahoma, Geneva, sans-serif; border:1px solid #007; border-radius:10px; } #ch_bg{ margin-bottom:7px; }
<,DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height: initial-scale,1. user-scalable=no' /> <title>Title Here</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script src='js/external.js'></script> </head> <body> <div class='main'> <div class='bar'><h1>Color Change Example</h1></div> <div class='guts' id='gut'> <label><span>couleur</span><input id='bg' type='text' value='' /><input id='ch_bg' type='button' value='changer couleur' /></label> </div> </div> </body> </html>
如何使用 HTML、CSS 和 JavaScript 根据值更改行的背景颜色？
[英]How can I change the background color of a row based on the value using HTML, CSS and JavaScript?
如何使用javascript从下拉菜单中更改网页的背景颜色需要这个
[英]How can I change background color of web page from drop down using javascript need this
如何使用JavaScript更改当前页面的导航按钮/链接的背景颜色？
[英]How can I change the background color of a current page's navigation button/link using JavaScript?
使用javascript更改文本值以及HTML页面中表格中单元格的背景色
[英]Using javascript to change the value of the text, and the background color of a cell within a table in HTML page
使用 JavaScript 永久更改所选文本的颜色并在 HTML 中恢复
[英]Permanently change color of selected text and revert in HTML with JavaScript
如果使用JavaScript函数的屏幕尺寸过小，我将如何更改HTML文件的背景颜色？
[英]How would I change the background color of an HTML file if the screen size is too small using a javascript function?
如何使用 javascript 更改 HTML 表格单元格的背景颜色？
[英]How do I change the background color of an HTML table cell with javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.