收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 7761|回复: 12

js控制CSS样式~

[复制链接]
发表于 2008-7-25 18:06:46 | 显示全部楼层 |阅读模式
<script>   
function   document.onmousedown(){   
  if(event.srcElement.tagName=="A")event.srcElement.style.cssText='color:red;'   
  }   
</script>  

请问怎么才能指定用在#ABC a里的连接上呢?

<div id="abc">
  <a href="#">ddddddddddddddddd</a>
  <a href="#">ddddddddddddddddd</a>
  <a href="#">ddddddddddddddddd</a>
</div>
<div id="aaa">
  <a href="#">bbbbbbb</a>
  <a href="#">bbbbbbbb</a>
  <a href="#">bnbbbbbb</a>
</div>
发表于 2008-7-25 18:16:36 | 显示全部楼层

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-7-25 18:38:33 | 显示全部楼层
3Q~
太感谢了……
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-8-2 15:39:08 | 显示全部楼层

请问有没有符合transitional.dtd的写法?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <body>
  4. <style type="text/css">
  5. #abc a{
  6.         height: 200px;
  7.         width: 200px;
  8.         border: 5px solid #FFFF66;
  9. }
  10. #abc a:hover {
  11.         border: 5px solid #000000;
  12. }
  13. </style>
  14. <script>   
  15. function   document.onmousedown(){   
  16.   if(event.srcElement.tagName=="A" && event.srcElement.parentNode.id == "abc")
  17.         event.srcElement.style.cssText='border: 5px solid #ff0000;'   
  18.   }   
  19. </script>  
  20. <div id="abc">
  21.   <a href="#"><img name="" src="" width="32" height="32" alt="" /></a>
  22.   <a href="#">ddddddddddddddddd</a>
  23.   <a href="#">ddddddddddddddddd</a>
  24. </div>
  25. </body>
  26. </html>
复制代码


这种写法不支持transitional.dtd,如:图片的访问后效果就显示不出来。
请问有没有符合transitional.dtd的写法?
回复 支持 反对

使用道具 举报

发表于 2008-8-2 16:35:48 | 显示全部楼层
用css来控制好了...
不需要没事就用js吧
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-8-2 16:40:14 | 显示全部楼层
用CSS做不出来那效果。。

用JS做的话,,可以在刷新后显示a:link状态。
用CSS的话,刷新后始终都是a:visited 状态
回复 支持 反对

使用道具 举报

发表于 2008-8-2 19:14:07 | 显示全部楼层
原帖由 [i]lilijlove 于 2008-8-2 16:40 发表
用CSS做不出来那效果。。

用JS做的话,,可以在刷新后显示a:link状态。
用CSS的话,刷新后始终都是a:visited 状态


可以把 a:visited 和 a:link的状态写成一样的吧

对于不同地方的a  用个子选择符就可以了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-8-3 11:00:34 | 显示全部楼层
可以把 a:visited 和 a:link的状态写成一样的吧

对于不同地方的a  用个子选择符就可以了


我想实现的是,在默认连接下为灰色。移上去变黑色,点击后变红色。。

如果用CSS的话会出现这么一个问题。。关悼网页在次打开后会是a:visited状态。。而不是a:link状态。

所以只有用JS来取代a:visited。这样只要刷新当前页就会回到a:lin状态。

目前用下面这个可以实现。。但这种写法不支持transitional.dtd,
<script>   
function   document.onmousedown(){   
  if(event.srcElement.tagName=="A" && event.srcElement.parentNode.id == "abc")
    event.srcElement.style.cssText='border: 5px solid #ff0000;'   
  }   
</script>  

文字可以正常显示,但图片的访问后效果就显示不出来。
不知道有没有符合transitional.dtd的写法?或,只要图片有效果就行。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-8-4 10:33:13 | 显示全部楼层
:confused:
回复 支持 反对

使用道具 举报

发表于 2008-8-4 10:41:03 | 显示全部楼层
让网站禁用缓存
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-8-4 14:41:27 | 显示全部楼层
让网站禁用缓存是啥意思?
回复 支持 反对

使用道具 举报

发表于 2008-8-4 19:53:25 | 显示全部楼层
原帖由 [i]lilijlove 于 2008-8-3 11:00 发表


我想实现的是,在默认连接下为灰色。移上去变黑色,点击后变红色。。

如果用CSS的话会出现这么一个问题。。关悼网页在次打开后会是a:visited状态。。而不是a:link状态。

所以只有用JS来取代a:visited。这样 ...


你CSS用错了...不需要JS的...

默认连接下为灰色 - a, a:link, a:visited
移上去变黑色 - a:hover
点击后变红色 - a:active
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-8-5 13:44:58 | 显示全部楼层
你CSS用错了...不需要JS的...

默认连接下为灰色 - a, a:link,
a:visited
移上去变黑色 - a:hover
点击后变红色 - a:active


我CSS没有用错,如果用CSS的话,,你关悼网页在打开始终都是点击过后的状态(a:visited)

a:active是当你按下时的颜色属性。
a:visited是你点击过后的属性
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-3-29 05:18 , Processed in 0.158779 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表