JS和CSS配合修饰链接样式

　　有时候我们需要统一把链接前面加一个小图标，让用户清楚这个链接是干什么的?以什么方式打开，用CSS可以实现，不过考虑到兼容性，我们用JS配合实现，言归正传。

　　1、先用CSS定义样式：

　　2、js代码，考虑到了锚点等内容，若是图片链接，就不要使用上面的CSS样式了：

　　接下来加到你的页面了，现在可以看演示了。

时间： 2024-11-03 03:02:20

JS和CSS配合修饰链接样式的相关文章

网页设计小技巧：用CSS制超级链接样式

css|技巧|链接|设计|网页|网页设计有时我们可能希望内部链接与外部链接显示不同的样式,如外部链接.我想在链接的旁边加上一个小图标,以表示其是一个外部的链接,来告诉来访者,让他们来确认是在新窗口打开还是在本窗口打开.我们可能会这样做:.external{background:url(images/external.gif) no-repeat right top;padding-right:12px;}然后给每一个外部的链接应用该CSS,当然,这样做并不是不可以,只是太繁琐. 那有没有好的办

用CSS样式表来定义博客上的链接样式

css|博客|链接|样式表 <style type="text/css"> A { text-decoration: NONE; color:#51bfe0} A:hover {font-weight: bold;color:#990099} <style>鼠标放在链接字体上的时候,链接字体变粗,颜色改变,如本博客上的样子.其中color:#990099表示链接字体改变的颜色,可以根据个人爱好修改,其他的不需要改. <style type="te

技巧分析：用javascript 转换外部CSS超级链接样式

css|javascript|技巧|链接|转换用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接. 但用css有弊端: 1.只支持FireFox等对web标准支持很好的浏览器.2.只能判断链接,不能判断锚点或javascript.如遇到<a href="javascript:void(0);">就无能为力了. 这里可以结合js来完成,首先写一个样式:a.other:link,a.other:visited,a.othe

用JS控制CSS基本样式

用JS控制CSS基本样式的方法 CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <link rel="stylesheet" type="text/css" href=

js控制CSS样式属性语法对照表_基础知识

CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.getElementById('ad').style.display='none';相当于:.ad{ display:none}. 下面就是JS 控制CSS样式表的语法对照: CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bott

基础：样式表CSS文件是链接还是应该嵌入？

css|链接|样式表 CSS样式表文件是使用link来调用单独的文件好呢,还是直接用<style>......</style>嵌入页面内部好呢?或者说究竟这两种方法该怎么使用呢? 在以前,我们通常采用2种方法使用样式表: 页面内嵌法:就是将样式表直接写在页面代码的head区.类似这样: <style type="text/css">&l

JS读写CSS样式的方法汇总_javascript技巧

为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式如:var elm = document.getElementById('test'); elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo

JS 控制CSS样式表_javascript技巧

下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... <style type="text/css"> .orig { display: none; } </style> 你想要改变把他的display属性由none改为inline. 解决办法: 在IE里: document.styleSheets[0].rules[0].style.display = "inline"; 在firef

JS获取CSS样式（style/getComputedStyle/currentStyle）_javascript技巧

CSS的样式分为三类: 内嵌样式:是写在Tag里面的,内嵌样式只对所有的Tag有效. 内部样式:是写在HTML的里面的,内部样式只对所在的网页有效. 外部样式表:如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件. getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值.返回的是一个CSS样式对象([object CSSStyleDeclar