<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 = 0k <3k++){
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 = 0k <3k++){
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: #88ee22background-color: #ef8989" id="color"></div>
<input onclick="getHexBgColor()" type="button" value="获得背景色" />
<input onclick="getHexColor()" type="button" value="获得字体颜色" />
</body>
</html>
点击“获得背景色”按钮，会调用getHexBgColor()方法获取css的背景色。
用CSS：input:hover {border: 5px solid #000}
用Javascript：
<input name="" type="text" onmouseover="this.style.border = '5px solid #000'" onmouseout="this.removeAttribute('style')" />
<html><head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>发送</title>
<style type="text/css">
table{
border-collapse:collapse
}
table td {
border: 1px solid #000000
padding: 2px 5px
}
input.warning{
border-color: red
}
</style>
<script type="text/javascript">
String.prototype.padLeft = function (len, charStr) {
return new Array(len - this.length + 1).join(charStr, '') + this
}
function changeBgColor(input){
var rgbInput = document.getElementById("rgb")
var redInput = document.getElementById("red")
var greenInput = document.getElementById("green")
var blueInput = document.getElementById("blue")
var redValue = Number(redInput.value)
var greenValue = Number(greenInput.value)
var blueValue = Number(blueInput.value)
if(redValue < 0 || redValue > 255 || isNaN(redValue))
{
alert("red value invalid")
redInput.className = "warning"
return
}
redInput.className = ""
if(greenValue < 0 || greenValue > 255 || isNaN(greenValue))
{
alert("green value invalid")
greenInput.className = "warning"
return
}
greenInput.className = ""
if(blueValue < 0 || blueValue > 255 || isNaN(blueValue))
{
alert("blue value invalid")
blueInput.className = "warning"
return
}
blueInput.className = ""
document.body.style.backgroundColor = "#" + redValue.toString(16).padLeft(2, '0') + greenValue.toString(16).padLeft(2, '0') + blueValue.toString(16).padLeft(2, '0')
}
</script>
</head>
<body>
<table>
<tr><td>red:</td><td><input type="text" id="red" name="red" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
<tr><td>green:</td><td><input type="text" id="green" name="green" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
<tr><td>blue:</td><td><input type="text" id="blue" name="blue" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
</table>
</body>
</html>
