Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mendapatkan dan mengubah suai warna latar belakang dan warna fon halaman web menggunakan kemahiran js_javascript

Bagaimana untuk mendapatkan dan mengubah suai warna latar belakang dan warna fon halaman web menggunakan kemahiran js_javascript

WBOYasal: 2016-05-16 15:22:471919semak imbas

Contoh dalam artikel ini menerangkan kaedah mendapatkan dan mengubah suai warna latar belakang dan warna fon halaman web menggunakan js. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Dapatkan warna latar belakang dan warna fon halaman web Caranya adalah seperti berikut:

Pemikiran: Apa yang kita dapat dengan mendapatkan nilai atribut warna ialah warna rgb, yang bukan yang kita mahu, jadi kita perlu menukar warna rgb kepada warna heksadesimal dahulu dapatkan warna rgb:

Kod adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var rgb = document.getElementById('color').style.backgroundColor ;

Format yang diperoleh adalah seperti berikut: rgb(225, 22, 23); dan kemudian belah:

Kod adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

var rgb = rgb.split('(')[1]; //Split Selepas membahagi, ia adalah dalam bentuk [rgb, 225,22,23)], susunan panjang 2

Kemudian belah rentetan (225,22,23) (nota: hanya jenis nombor boleh ditukar, jadi gunakan parseInt untuk memaksa jenis penukaran!):

Kod adalah seperti berikut:

for(var k = 0; k < 3; k++){
str[k] = parseInt(rgb .split(',')[k]).toString(16);//str 数组保存拆分后的数据
}

Gabungan akhir:

Kod adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

str = '#' str[0] str[1] str[ 2];

Kod lengkap adalah seperti berikut:

<!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>

Kaedah untuk menukar warna latar belakang menggunakan javascript adalah seperti berikut:

<body leftmargin=5 topmargin=0 onmouseover="document_onmouseover();"onclick="document_onclick();" id="all" >
<SCRIPT LANGUAGE="javascript">
var curObj= null;
var curObjmouseover=null;
function document_onclick() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
curObjmouseover.style.background='';
if(curObj!=null)
curObj.style.background='';
curObj=window.event.srcElement;
curObj.style.background='#ff0099';
  }
}
function document_onmouseover() {
if(window.event.srcElement.tagName=='A'||window.event.srcElement.tagName=='FONT'){
if(curObjmouseover!=null)
{curObjmouseover.style.background='';
curObjmouseover.style.color='#000000';}
if(curObj!=null)
curObj.style.background='';
curObjmouseover=window.event.srcElement;
curObjmouseover.style.background='#cccc00';
curObjmouseover.style.color='#ffffff';
  }
}
 </SCRIPT>
<div>
 <a href='#'>来自脚本之家</a> </div>
<div> <a href='#'>来自脚本之家</a> </div>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js melaksanakan penatalan menegak teks dan kemahiran effect_javascript hover tetikusArtikel seterusnya：js melaksanakan penatalan menegak teks dan kemahiran effect_javascript hover tetikus

Artikel berkaitan

Lihat lagi