Maison >interface Web >js tutoriel >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

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

WBOYoriginal: 2016-05-16 15:22:471913parcourir

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 数组保存拆分后的数据
}

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>

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>

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

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：js implémente le défilement vertical du texte et les compétences de survol de la souris effect_javascriptArticle suivant：js implémente le défilement vertical du texte et les compétences de survol de la souris effect_javascript

Articles Liés

Voir plus