js背景色
A. JS点击更换网页背景颜色。
javascript脚本:
<scripttype="text/javascript">
//定义可换的颜色
varcolors=["#ff0000","#00ff00","#0000ff","#ffff00","#00ffff","#ff00ff"];
varindex=0;
//换色方法
functionchangeColor(){
//获取颜色代码
varcolor=colors[index++];
//更改文档的背景色
document.bgColor=color;
if(index==colors.length){
index=0;
}
}
</script>
HTML代码:
<inputtype="button"value="换色"onclick="changeColor();"/>
B. JS控制table特定tr的背景颜色
代码如下:
<script>
//js放到table下,才能检测到tr数组
var trs = document.getElementById("tableBox").getElementsByTagName("tr");
var trs=document.getElementById("tableBox").getElementsByTagName("tr");
$(function(){
for(var i=0;i<trs.length;i++){
trs[i].onmousedown = function(){
mousedownclick(this);
}
}
});
function mousedownclick(obj){
for(var j=0;j<trs.length;j++){
if(trs[j]==obj){
trs[j].style.background='blue';
}else{
trs[j].style.background='';
}
}
}
</script>
(2)js背景色扩展阅读
js操作table的各种用法:
(1)得到table 中tbody 的内容 :$('#simple-table').find('tbody').html();
(2)点击td时,获取点击的行号:
$('#simple-table tbody').on( 'click', 'td', function (e) {
normalRowIndex = $(this).parent().index(); //行号
console.log("正常工作表行:"+normalRowIndex);
});
(3)为table追加一行:
function addNormalTR(){
$('#simple-table').find('tbody').append(trtd); //tdtd为拼接的trtd 的html内容。
}
(4) 点击td中的元素获取,当前行号: obj.parentNode.parentNode.rowIndex;//obj 为元素对象
C. JS改变div背景色
<!DOCTYPEhtml>
<html>
<head>
<title>js随机改变标签背景颜色</title>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<styletype="text/css">
*{margin:0;padding:0;}
body{font-size:12px;line-height:150%;font-family:"微软雅黑",Arial;text-align:center;}
h3{font-size:16px;line-height:150%;}
.wrap{width:300px;margin:0auto;}
.wrapul{padding:15px0;}
.wrapli{display:block;width:100%;overflow:hidden;height:30px;background:red;margin-top:5px;}
</style>
<scripttype="text/javascript">
functionswitchColor(){
varc=['#111','red','green','blue','#ace','#f60','#ccc'];
varli=document.getElementById("bg").getElementsByTagName("li");
if(li){
vartotal=c.length;
for(vari=0,j=li.length;i<j;i++){
//随机颜色
varrnd=Math.floor(Math.random()*total);
li[i].style.backgroundColor=c[rnd];
}
}
}
</script>
</head>
<body>
<h3>js随机改变标签背景颜色</h3>
<divclass="wrap">
<ulid="bg">
<li>第1个</li>
<li>第2个</li>
<li>第3个</li>
<li>第4个</li>
<li>第5个</li>
<li>第6个</li>
</ul>
<inputtype="button"value="输入:1"onclick="switchColor();"/>
</div>
</body>
</html>
这里为了方便直接用的LI标签,DIV也是一样的,由于颜色和LI标签的数量可以不同,所以用了个随机颜色,你稍微调整下就可以了,不过这个用jQuery额each来遍历最简单
D. js 改变div 背景颜色问题
这样写试一试
document.getElementById('a').style.background="#FF0000";
你那样也没有错 我这可以运行
E. 如何用js改变连接背景颜色
参考下
<body>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<UL style="DISPLAY: block; height:232px;">
<LI class="current2"><A href="index.php" id="index">首页</A></LI>
<LI ><A href="tradelist.php" id="tradelist">订单管理</A></LI>
<LI ><A href="mingxilist.php" id="mingxilist">收入明细</A></LI>
</UL>
<script type="text/javascript">
var url = window.location.toString();
var param = url.substring(url.lastIndexOf('/')+1, url.lastIndexOf('.'));
document.getElementById(param).style.background = '#FFFF00';
</script>
</body>
F. js 如何获取背景色的值
javascript的style属性只能获取内联样式,对于外部样式和嵌入式样式需要用currentStyle属性。但是,currentStyle在FIrefox和Chrome下不支持,需要使用如下兼容性代码
HTMLElement.prototype.__defineGetter__("currentStyle",function(){
returnthis.ownerDocument.defaultView.getComputedStyle(this,null);
});
接下来就可以直接使用currentStyle属性来获取元素的样式了,下面实例演示获取页面body的背景色:
1、HTML结构
<inputtype='button'value='点击按钮获取页面背景色'onclick="fun()"/>
2、CSS样式
body{background:RGB(222,222,2);}
3、javascript代码
HTMLElement.prototype.__defineGetter__("currentStyle",function(){
returnthis.ownerDocument.defaultView.getComputedStyle(this,null);
});
functionfun(){
varcolor=document.body.currentStyle.backgroundColor;
alert(color);
}
4、效果演示
G. 如何给js文件添加一个全背景颜色,目前没有背景颜色的
为什么要用js 直接css处理一下
body{backgroundcolor:#}
非要用js就取body元素后设置
document.querySelector('body').style.backgroundColor = '#'
H. JS (javaScript)中获取CSS背景颜色的问题
<!DOCTYPE html>
<html>
<head>
<title>getHexColor js/jQuery 获得十六进制颜色</title>
<meta charset="utf-8" />
<script type="text/javascript">
function getHexBgColor(){
var str = [];
var rgb = document.getElementById('color').style.backgroundColor.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
function getHexColor(){
var str = [];
var rgb = document.getElementById('color').style.color.split('(');
for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb[1].split(',')[k]).toString(16);
}
str = '#'+str[0]+str[1]+str[2];
document.getElementById('color').innerHTML = str;
}
</script>
<style type="text/css">
#color{
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div style="color: #88ee22; background-color: #ef8989;" id="color"></div>
<input onclick="getHexBgColor();" type="button" value="获得背景色" />
<input onclick="getHexColor();" type="button" value="获得字体颜色" />
</body>
</html>
点击“获得背景色”按钮,会调用getHexBgColor()方法获取css的背景色。
I. 怎么用JS动态更改DIV层的背景色
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建专html文件,例如:index.html,填写问属题基础代码。
J. 怎么用js在html中设置背景颜色
js所有修改css的方法是
获取dom元素 var xxx=document.querySelector('css选择器')
xxx.style.backgroundColor='颜色';