Comment obtenir et modifier la couleur d'arrière-plan et la couleur de la police d'une page Web à l'aide des compétences js

Comment obtenir et modifier la couleur d'arrière-plan et la couleur de la police d'une page Web à l'aide des compétences js_javascript

WBOY

Libérer： 2016-05-16 15:22:47

original

1899 Les gens l'ont consulté

L'exemple de cet article décrit la méthode d'obtention et de modification de la couleur d'arrière-plan et de la couleur de la police de la page Web à l'aide de js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Obtenez la couleur d'arrière-plan et la couleur de la police de la page Web. La méthode est la suivante :

Pensée : Ce que nous obtenons en obtenant la valeur de l'attribut de couleur est la couleur RVB, ce qui n'est pas ce que nous voulons, nous devons donc changer la couleur RVB en couleur hexadécimale :

Le code est le suivant :

Copier le code Le code est le suivant :

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

Le format obtenu est le suivant : rgb(225, 22, 23) puis split :

Le code est le suivant :

Copier le code Le code est le suivant :

var rgb = rgb.split('(')[1]; //Split Après division, il se présente sous la forme de [rgb, 225,22,23)], un tableau de longueur 2

Divisez ensuite la chaîne (225,22,23) (remarque : seul le type numérique peut être converti, utilisez donc parseInt pour forcer le type de conversion !) :

Le code est le suivant :

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

Copier après la connexion

Combinaison finale :

Le code est le suivant :

Copier le code Le code est le suivant :

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

Le code complet est le suivant :

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

Copier après la connexion

La méthode pour changer la couleur d'arrière-plan à l'aide de javascript est la suivante :

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

Copier après la connexion

J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.