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='顏色';