<div style="">
标签a中<a href='' alt=''/>
在上面效果中,style,href,alt都是标签属性,这些是于XML类似的,当然,现在普遍采用的HTML是XHTML,它与XML是兼容的。我们可以用DOM来访问这些标签属性;
通过修改这些方法,我们可以改变标签的样式,就是修改style属性,也可以改变超链接的链接地址,就是href属性,等等;工作中经常用的,并不稀奇;
但是并没有给HTML标签写过自定义的属性,就是给标签写一个它并不存在属性;如
<div TextLength="20"></div>
在HTML中,div标签并没有TextLength属性,是我自已经加的;
假如,页面中有这样一段HTML代码:
<div>新闻列表
<ul>
<li>[图]不按规定线路运营 阻挠执法人员执法 公交车擅改运营线路被查处 [2007-7-31] </li>
<li>五金厂已搬迁 眼镜厂仍扰民 [2007-7-31] </li>
<li>[图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27] </li>
<li>[图]花园后面的山脚边,存在大量的乱搭建,街道执法队展... [2007-7-27] </li>
</ul>
</div>
我要截取这些字符,当然很容易;用getElementsByTabName取出li标签列表,用个for循环逐一处理一个就可以了;
但
是,字符截多长呢,自然要设变量,这个变量设在哪呢,如果写在javascript中,这个变量离HTML代码太远了(一个在头部head,一个在
body),开发人员不方便操作,因为在页面中,它能会有很多这样的新闻列表或其它列表;于是我想到了给li的父级标签ul,加自定义属性,当然,如果是
ol也是可以的,只要是li的父级就行;如:
<div>新闻列表
<ul TextLength="15">
<li>[图]不按规定线路运营 阻挠执法人员执法 公交车擅改运营线路被查处 [2007-7-31] </li>
<li>五金厂已搬迁 眼镜厂仍扰民 [2007-7-31] </li>
<li>[图]“2007香港购物节”正在举行——市民赴港疯狂“血拼” [2007-7-27] </li>
<li>[图]花园后面的山脚边,存在大量的乱搭建,街道执法队展... [2007-7-27] </li>
</ul>
</div>
与前面相比,ul多了TextLength属性,就是我要截取的字符串长度值;然后,我写了一个函数,来读取这个属性,并将该区域的li中字符截短。函数如下:
<script language="javascript" type="text/javascript">
function lineShow()
{
var list = document.getElementsByTagName("li")
for(var i = 0i <list.lengthi ++ )
{
// 获取自定义参数,为字符长度
var textlength = Number(list[i].parentNode.getAttribute("TextLength"))
list[i].setAttribute("title", list[i].innerHTML)
list[i].innerHTML = subString(list[i].innerHTML, textlength)
}
}
function subString(str, len)
{
len = len == null || isNaN(len) ? 0 : len
if(len <1 || str.length <= len)return str
return str.substr(0, len) + "…"
}
</script>
上面代码中的语句,都是较常用的,不用过多解释了。
最后,在页面载入完毕时,调用该函数就行了。调用函数的代码如下:
<script language="javascript" type="text/javascript" defer="true">
lineShow()
</script>
这时效果就出现了,页面中所有列表字符被截短,当鼠标碰上时,显示其完整标题;
其实上面的javascript并没有什么特殊的,很简单,唯一不同的是,我利用自定义属性,让开发人员,在使用这个效果时,更方便了。
内联样式:在HTML元素中使用"style"属性,详细步骤:
1、当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在标签中使用样式属性,样式属性可以是任何 CSS 属性。其作用范围是在当前标签内,使用较少,代码为:<div style="color:bluefont-size:20px">新增区域</div>。
2、当单个文件需要特别样式时,就可以使用嵌套样式。通过在<head>部分定义<style>标签书写嵌套样式,在<style>标签中可以使用标签选择器,类选择器,id选择器等去给标签设置属性,如下图所示。
3、当样式需要被应用到很多页面的时候,将会使用外联样式,通过更改一个文件来改变所以页面的样式。此时我们需要在<head>标签中引入<link>标签,<link rel="stylesheet" type="text/css" href="a.css">,href中为需要引入的css文件,如下图所示。
4、单独的css文件是以.css为后缀名的文件,在该文件内可以直接设置标签样式,不需要包在<style>标签里,如下图所示。
5、当我们想为某一个元素设置特殊样式的时候,可以将该元素写在<span></span>标签内,因为<span>标签没有特殊的语义,适合单独设置样式,如下图所示。