例如,现在有一个五颜六色的网页,我想得到指针任意位置的颜色,应该如何实现?求高手……
解决方案 »
- 在js中用document.execCommand("print")实现了jsp的打印,请问如何在js中设置默认横版打印
- javascript关于监听浏览器关闭问题
- 如何用js语句插入一个<tr>到table
- 问一个javascript \u的显示问题
- 这种Flash是怎样实现的,
- 用xmlhttp攻击流氓网站
- csdn社区这种frame的显示和隐藏如何实现的,有类似的代码吗?
- 在网页中怎样用javascript实现对话框中出现三个选择 是/否/取消,如何声明和取值
- 在javascript中怎样得到当前的年份?
- 有什么辦法讓瀏覽器地址欄顯示指定的地址而不是自動顯示的地址?
- 怎么编写类似QQ聊天记录的代码呢?
- js 标签内值的转换
如果你是要获取元素属性
var all=document.getElementsByTagName("*"),len=all.length;
while(len--){
all[len].onmouseclick=function(){
alert(this.getAttribute("name"));
}
}
要做到你这个功能。必须做下面的步骤
1.取得元素
2.取得元素的字的颜色
3.如果刚好没有字,那么取背景色。现在js能做到的是1,3。2无法做到。因为无法判断鼠标坐标是否在字笔画的中间还是正好在笔画上。
所以现在能做的,大都跟#3给出的那样。只有背景色,而网格没有字。
<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>
<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>