有人知道使用JavaScript交换网页背景色的简单方法吗?
修改JavaScript属性document.body.style.background
。
例如:
function changeBackground(color) {
document.body.style.background = color;
}
window.addEventListener("load",function() { changeBackground('red') });
注意:这确实取决于页面的组合方式,例如,如果您使用的背景颜色不同的DIV容器,则需要修改其背景颜色而不是文档主体。
您不需要AJAX,只需一些简单的Java脚本来设置body元素的background-color属性,如下所示:
document.body.style.backgroundColor = "#AA0000";
如果要像由服务器启动一样进行操作,则必须轮询服务器,然后相应地更改颜色。
我同意以前的海报,即更改颜色className
是一种更漂亮的方法。但是,我的论点是aclassName
可以看作是“为什么要让背景是这种或那种颜色”的定义。
例如,将其设置为红色不仅是因为您希望将其设置为红色,还因为您想将错误通知用户。因此,AnErrorHasOccured
在主体上设置className是我的首选实现。
在CSS
body.AnErrorHasOccured
{
background: #f00;
}
在JavaScript中:
document.body.className = "AnErrorHasOccured";
这样,您就可以根据该样式来设置更多元素的样式了className
。因此,通过设置className
您可以赋予页面某种状态。
AJAX正在使用Javascript和XML以异步方式从服务器获取数据。除非您要从服务器下载颜色代码,否则这不是您真正的目标!
但是,否则,您可以使用Javascript设置CSS背景。如果您使用的是jQuery之类的框架,它将是这样的:
$('body').css('background', '#ccc');
否则,这应该起作用:
document.body.style.background = "#ccc";
您可以按照以下
步骤1
var imageUrl= "URL OF THE IMAGE HERE";
var BackgroundColor="RED"; // what ever color you want
对于身体变化的背景
document.body.style.backgroundImage=imageUrl //changing bg image
document.body.style.backgroundColor=BackgroundColor //changing bg color
更改具有ID的元素
document.getElementById("ElementId").style.backgroundImage=imageUrl
document.getElementById("ElementId").style.backgroundColor=BackgroundColor
对于相同类别的元素
var elements = document.getElementsByClassName("ClassName")
for (var i = 0; i < elements.length; i++) {
elements[i].style.background=imageUrl;
}
我不会真的将其归类为“ AJAX”。无论如何,以下方法应该可以解决问题:
document.body.style.backgroundColor = 'pink';
CSS方法:
如果要看到连续的颜色,请使用以下代码:
body{
background-color:black;
animation: image 10s infinite alternate;
animation:image 10s infinite alternate;
animation:image 10s infinite alternate;
}
@keyframes image{
0%{
background-color:blue;
}
25%/{
background-color:red;
}
50%{
background-color:green;
}
75%{
background-color:pink;
}
100%{
background-color:yellow;
}
}
如果您想看得更快或更慢,请将10秒更改为5秒,以此类推。
您可以使用以下方法更改页面背景:
document.body.style.background = #000000; //I used black as color code
但是,以下脚本将使用setTimeout()函数每3秒更改一次页面背景:
$(function() {
var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];
setInterval(function() {
var bodybgarrayno = Math.floor(Math.random() * colors.length);
var selectedcolor = colors[bodybgarrayno];
$("body").css("background",selectedcolor);
}, 3000);
})
我希望在这里看到css类的使用。它避免了难以阅读javascript中的颜色/十六进制代码的情况。
document.body.className = className;
这将根据从下拉菜单中选择的用户的选择来更改背景颜色:
function changeBG() {
var selectedBGColor = document.getElementById("bgchoice").value;
document.body.style.backgroundColor = selectedBGColor;
}
<select id="bgchoice" onchange="changeBG()">
<option></option>
<option value="red">Red</option>
<option value="ivory">Ivory</option>
<option value="pink">Pink</option>
</select>
将此脚本元素添加到您的body元素,根据需要更改颜色:
<body>
<p>Hello, World!</p>
<script type="text/javascript">
document.body.style.backgroundColor = "#ff0000"; // red
</script>
</body>
如果您希望使用按钮或其他事件,只需在JS中使用它:
document.querySelector("button").addEventListener("click", function() {
document.body.style.backgroundColor = "red";
});
<!DOCTYPE html>
<html>
<body>
<select name="" id="select" onClick="hello();">
<option>Select</option>
<option style="background-color: #CD5C5C;">#CD5C5C</option>
<option style="background-color: #F08080;">#F08080</option>
<option style="background-color: #FA8072;">#FA8072</option>
<option style="background-color: #E9967A;">#E9967A</option>
<option style="background-color: #FFA07A;">#FFA07A</option>
</select>
<script>
function hello(){
let d = document.getElementById("select");
let text = d.options[d.selectedIndex].value;
document.body.style.backgroundColor=text;
}
</script>
</body>
</html>
但是您需要在<body>
元素存在之前配置主体颜色。这样一来,它就具有正确的颜色。
<script>
var myColor = "#AAAAAA";
document.write('\
<style>\
body{\
background-color: '+myColor+';\
}\
</style>\
');
</script>
您可以将其放在<head>
文档的或js文件中。
这是一种不错的颜色。
var myColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
我建议以下代码:
<div id="example" onClick="colorize()">Click on this text to change the
background color</div>
<script type='text/javascript'>
function colorize() {
var element = document.getElementById("example");
element.style.backgroundColor='#800';
element.style.color='white';
element.style.textAlign='center';
}
</script>
您可以使用以下方法更改页面背景:
function changeBodyBg(color){
document.body.style.background = color;
}
阅读更多@更改背景颜色
另外,如果您希望以rgb表示法指定背景色值,请尝试
document.getElementById("yourid").style.backgroundColor = 'rgb(' + a + ',' + b + ',' + c + ')';
其中a,b,c是颜色值
例:
document.getElementById("yourid").style.backgroundColor = 'rgb(224,224,224)';
function pink(){ document.body.style.background = "pink"; }
function sky(){ document.body.style.background = "skyblue"; }
<p onclick="pink()" style="padding:10px;background:pink">Pink</p>
<p onclick="sky()" style="padding:10px;background:skyblue">Sky</p>
这是使用javascript更改背景的简单编码
<body onLoad="document.bgColor='red'">
文章标签:css , javascript
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!