當前位置:首頁 » 風景景觀 » 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