Heim > Artikel > Web-Frontend > So erhalten und ändern Sie die Hintergrund- und Schriftfarbe einer Webseite mithilfe von js_javascript-Kenntnissen

So erhalten und ändern Sie die Hintergrund- und Schriftfarbe einer Webseite mithilfe von js_javascript-Kenntnissen

WBOYOriginal: 2016-05-16 15:22:471881Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zum Abrufen und Ändern der Hintergrundfarbe und Schriftfarbe der Webseite mithilfe von js. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Erhalten Sie die Hintergrundfarbe und Schriftfarbe der Webseite. Die Methode ist wie folgt:

Gedanke: Was wir erhalten, wenn wir den Farbattributwert erhalten, ist RGB-Farbe, was nicht das ist, was wir wollen, also müssen wir die RGB-Farbe in eine Hexadezimalfarbe ändern:

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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

Das erhaltene Format ist wie folgt: rgb(225, 22, 23); und dann aufgeteilt:

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

var rgb = rgb.split('(')[1]; //Teilen Nach dem Teilen hat es die Form [rgb, 225,22,23)], ein Array der Länge 2

Teilen Sie dann die Zeichenfolge (225,22,23) auf (Hinweis: Nur der Zahlentyp kann konvertiert werden. Verwenden Sie daher parseInt, um die Typkonvertierung zu erzwingen!):

Der Code lautet wie folgt:

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

Endgültige Kombination:

Der Code lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

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

Der vollständige Code lautet wie folgt:

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

Die Methode zum Ändern der Hintergrundfarbe mit Javascript ist wie folgt:

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

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js implementiert vertikales Scrollen von Text und Maus-Hover-Effekte_Javascript-FähigkeitenNächster Artikel：js implementiert vertikales Scrollen von Text und Maus-Hover-Effekte_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen