如何用javascript获取鼠标指向的元素属性

例如，现在有一个五颜六色的网页，我想得到指针任意位置的颜色，应该如何实现？求高手……

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

有很多颜色提取器搜一下就有
如果你是要获取元素属性
var all=document.getElementsByTagName("*"),len=all.length;
while(len--){
all[len].onmouseclick=function(){
alert(this.getAttribute("name"));
}
}
http://colorschemedesigner.com/
看了上面的回复。我还是要提醒下lz。单用javascript，是无法做到的。
要做到你这个功能。必须做下面的步骤
1.取得元素
2.取得元素的字的颜色
3.如果刚好没有字，那么取背景色。现在js能做到的是1,3。2无法做到。因为无法判断鼠标坐标是否在字笔画的中间还是正好在笔画上。
所以现在能做的，大都跟#3给出的那样。只有背景色，而网格没有字。
突感兴趣，做了个简易的<html>
<head>
<style>
#csd3-preview-palette{
width:300px;
height:200px;
}
</style></head>
<body>
<table id="csd3-preview-palette">
<tbody><tr class="pri">
<td class="cbox bg-pri-3" rel="pri-3" style="background-color: rgb(255, 64, 64); "></td>
<td class="cbox bg-pri-0" rel="pri-0" rowspan="2" style="background-color: rgb(255, 0, 0); "></td>
<td class="cbox bg-pri-1" rel="pri-1" style="background-color: rgb(191, 48, 48); "></td>
</tr>
<tr class="pri">
<td class="cbox bg-pri-4" rel="pri-4" style="background-color: rgb(255, 115, 115); "></td>
<td class="cbox bg-pri-2" rel="pri-2" style="background-color: rgb(166, 0, 0); "></td>
</tr>
<tr class="sec sec1">
<td class="cbox bg-sec1-1" rel="sec1-1" style="background-color: rgb(255, 64, 64); "></td>
<td class="cbox bg-sec1-0" rel="sec1-0" rowspan="2" style="background-color: rgb(255, 64, 64); "></td>
<td class="cbox bg-sec1-3" rel="sec1-3" style="background-color: rgb(255, 64, 64); "></td>
</tr>
<tr class="sec sec1">
<td class="cbox bg-sec1-2" rel="sec1-2" style="background-color: rgb(255, 64, 64); "></td>
<td class="cbox bg-sec1-4" rel="sec1-4" style="background-color: rgb(255, 64, 64); "></td>
</tr>
<tr class="sec sec2">
<td class="cbox bg-sec2-1" rel="sec2-1" style="background-color: rgb(255, 115, 115); "></td>
<td class="cbox bg-sec2-0" rel="sec2-0" rowspan="2" style="background-color: rgb(255, 115, 115); "></td>
<td class="cbox bg-sec2-3" rel="sec2-3" style="background-color: rgb(255, 115, 115); "></td>
</tr>
<tr class="sec sec2">
<td class="cbox bg-sec2-2" rel="sec2-2" style="background-color: rgb(255, 115, 115); "></td>
<td class="cbox bg-sec2-4" rel="sec2-4" style="background-color: rgb(255, 115, 115); "></td>
</tr>
<tr class="compl">
<td class="cbox bg-compl-1" rel="compl-1" style="background-color: rgb(166, 0, 0); "></td>
<td class="cbox bg-compl-0" rel="compl-0" rowspan="2" style="background-color: rgb(166, 0, 0); "></td>
<td class="cbox bg-compl-3" rel="compl-3" style="background-color: rgb(166, 0, 0); "></td>
</tr>
<tr class="compl">
<td class="cbox bg-compl-2" rel="compl-2" style="background-color: rgb(166, 0, 0); "></td>
<td class="cbox bg-compl-4" rel="compl-4" style="background-color: rgb(166, 0, 0); "></td>
</tr> </tbody></table> <div id="csd3-tooltip" style="position:absolute;left: 713px; top: 583px; display: none; " class=""></div>
</body>
<script>
var b = document.getElementsByTagName("td");
var t = document.getElementById("csd3-tooltip");
for(var i=0;i<b.length;i++){
b[i].onmouseover = function(event){
event = event || window.event;
t.style.left = event.x;
t.style.top = event.y;
t.innerHTML = this.style.background;
t.style.display = "block";
} b[i].onmouseout = function(){
t.style.display = "none";
}
}
</script>
</html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title></title>
    <script type="text/javascript" >
   function getClickedElementId(event) {
        var obj;
        if (!event) event = window.event;
        if (event.target) obj = event.target;
        else if (event.srcElement) obj = event.srcElement; //获取事件的对象        if (obj.nodeType == 3) obj = obj.parentNode;
        alert("点击的对象是：" + obj.id + "\n" + "颜色是" +obj.style.backgroundColor); //显示对象id、属性
}
    </script>
</head>
<body  onclick ="getClickedElementId(event)">
<div style="background-color:Red" id="div1">1</div>
<div style="background-color:Yellow" id="div2">2</div>
<div style="background-color:Blue" id="div3">3</div>
</body>
</html>