Программирование > JavaScript & JScript
Смена цвета строки средствами CSS?
C++:
Привет.
Сделал как написано в первом посте, но все равно не работает:(
При ресайзе окна выдает ошибку (14,2) - требуется объект.
Вот код, который я тестировал.
<html>
<head>
<script language="JavaScript">
document.onmouseover = eventHandler;
document.onmouseout = eventHandler;
agent=navigator.userAgent.toLowerCase()
op=agent.indexOf("opera")>-1 && window.opera
ie = (agent.indexOf("msie")>-1 && !op)
mz=(agent.indexOf("gecko")>-1 || window.sidebar)
function eventHandler(e)
{
if(ie) e = event;
var obj = (ie?e.srcElement:e.target);
if(obj.nodeName=="#text") obj = obj.parentNode;
if(obj.nodeName=="td") obj = obj.parentNode;
if(obj.nodeName == "tr")
{
if(e.type =\'mouseout\') obj.style.backgroundColor = \'#000000\';
if(e.type =\'mouseover\') obj.style.backgroundColor = \'#FFFFFF\';
}
}
window.onresize = eventHandler;
</script>
</head>
<body text="#FFFF00">
<table width="700" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#000000">
<tr align="center" bgcolor="#999999">
<td><b>stroka</b></td>
<td><b>stroka</b></td>
</tr>
<tr align="center" bgcolor="#999999" id="str">
<td><b>stroka</b></td>
<td><b>stroka</b></td>
</tr>
</table>
</body>
</html>
А можно скрипт как-нибудь модифцировать, чтобы он реагировал не только на тег TR, а на любой тег с id=change?
Что-то вроде вот этого, но тоже не работает.
<script language="JavaScript">
document.onmouseover = eventHandler;
document.onmouseout = eventHandler;
ie = (agent.indexOf("msie")>-1 && !op)
function eventHandler(e)
{
e = event;
var obj = (ie?e.srcElement:e.target);
if(obj.id == "change")
{
if(e.type =\'mouseout\') obj.style.backgroundColor = \'#000000\';
if(e.type =\'mouseover\') obj.style.backgroundColor = \'#FFFFFF\';
}
}
window.onresize = eventHandler;
</script>
В принципе мне не обязательно, чтобы он работал во всех броузерах, достаточно и IE.
Спасибо
C++:
Спасибо всем, кто откликнулся!
Вот собрал полностью готовый вариант!
<html>
<head>
<SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>
function on(color)
{
if (event.srcElement.tagName==\'TD\')
{
if(event.srcElement.parentNode.id==\'overYes\')
event.srcElement.parentNode.bgColor=color;
}
}
</SCRIPT>
</head>
<body bgcolor=#E8F1F7 text=#000066 onmouseover=on(\'#999999\') onmouseout=on(\'#9999CC\')>
<table width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#000000>
<tr id=t>
<td colspan=2 align=center bgcolor=#3366CC>TABLE HEAD</td>
</tr>
<tr align=center id=overYes bgcolor=#9999CC>
<td>TR1</td>
<td>TR1</td>
</tr>
<tr align=center id=overYes bgcolor=#9999CC>
<td>TR2</td>
<td>TR1</td>
</tr>
<tr align=center id=overYes bgcolor=#9999CC>
<td> TR3</td>
<td>TR1</td>
</tr>
</table>
</body>
</html>
С удовольствием выслушаб критику по поводу совместимости с другими броузерами, кроме IE. Просто нет возможности проверить.
Xander:
не используй id, используй классы: по правилам одинаковые id не допускаются
а лучше используй два класса, отличающихся только параметров color - тогда меньше придется мучатся, если захочешь цвета поменять
C++:
Xander
А как до свойства class добраться?
Мне в принципе так и надо сделать....
Но, только когда я делаю так:
<html>
<head>
<SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>
function on(style)
{
if (event.srcElement.tagName==\'TD\')
{
if(event.srcElement.parentNode.class==\'t\'||event.srcElement.parentNode.class==\'t_over\')
event.srcElement.parentNode.class=style;
}
}
</SCRIPT>
<style type="text/css">
<!--
.t {
background-color: #9999CC;
}
.t_over {
background-color: #999999;
}
-->
</style>
</head>
<body bgcolor=#E8F1F7 text=#000066 onmouseover=on(\'t_over\') onmouseout=on(\'t\')>
<table width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#000000>
<tr id=t>
<td colspan=2 align=center bgcolor=#3366CC>TABLE HEAD</td>
</tr>
<tr align=center class=t>
<td>TR1</td>
<td>TR1</td>
</tr>
<tr align=center class=t>
<td>TR2</td>
<td>TR1</td>
</tr>
<tr align=center class=t>
<td> TR3</td>
<td>TR1</td>
</tr>
</table>
</body>
</html>
Браузер пишет: Предполагается наличие объекта указывает на строку
C++:
Вопрос снят.
Пошел учить JavaScript! :)
Надо так:
<html>
<head>
<SCRIPT LANGUAGE=JavaScript TYPE=text/javascript>
function on(style)
{
if (event.srcElement.tagName==\'TD\')
{
if(event.srcElement.parentNode.className==\'t\'||event.srcElement.parentNode.className==\'t_over\')
event.srcElement.parentNode.className=style;
}
}
</SCRIPT>
<style type="text/css">
<!--
.t {
background-color: #9999CC;
}
.t_over {
background-color: #999999;
}
-->
</style>
</head>
<body bgcolor=#E8F1F7 text=#000066 onmouseover=on(\'t_over\') onmouseout=on(\'t\')>
<table width=100% border=0 cellpadding=1 cellspacing=1 bgcolor=#000000>
<tr id=t>
<td colspan=2 align=center bgcolor=#3366CC>TABLE HEAD</td>
</tr>
<tr align=center class=t>
<td>TR1</td>
<td>TR1</td>
</tr>
<tr align=center class=t>
<td>TR2</td>
<td>TR1</td>
</tr>
<tr align=center class=t>
<td> TR3</td>
<td>TR1</td>
</tr>
</table>
</body>
</html>
Навигация
Перейти к полной версии