当前位置:首页 » 风景景观 » js背景色

js背景色

发布时间: 2020-11-23 12:06:10

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的方法是

  1. 获取dom元素 var xxx=document.querySelector('css选择器')

  2. xxx.style.backgroundColor='颜色';

热点内容
一部国外电影,一个老男人骑个摩托车 发布:2024-08-19 09:13:10 浏览:920
脖子上有睾丸是什么电影 发布:2024-08-19 09:03:17 浏览:374
变形金刚撒谁家的 发布:2024-08-19 08:43:06 浏览:478
美国男电影双胞胎 发布:2024-08-19 08:42:20 浏览:764
黑人橄榄球少年收养电影 发布:2024-08-19 08:25:26 浏览:918
夏目哉大片 发布:2024-08-19 08:09:22 浏览:806
他第一部出演的电视剧是,的英语 发布:2024-08-19 08:07:54 浏览:654
电影检索 发布:2024-08-19 07:48:52 浏览:198
谁有视频 发布:2024-08-19 07:41:55 浏览:141
成龙香港鬼片电影大全 发布:2024-08-19 07:39:46 浏览:223