<![CDATA[vkill'blog 何永鹏]]> http://blog.vkill.net/index.php en-US http://blog.vkill.net/read.php/118.htm <![CDATA[画表格斜线vml或div+css]]> vkill <vkill.net@gmail.com> Tue, 11 Nov 2008 01:35:30 +0000 http://blog.vkill.net/read.php/118.htm
用到的主知识点：
js获得内嵌式css中属性的值
vml画直线

演示地址：
http://www.vkill.net/demo/table_bias/table_bias.html

代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>表格斜线 vml / div+css</title>
<style>
v\:* { Behavior: url(#default#VML) }
</style>
<style type="text/css">
* {
  margin:0px;
  padding: 0px;
}
body, div {
  margin: 0px auto;
  lineHeight: 20px;
  font-size: 14px;
}

ul, li {
  clear: both;
  list-style-type: none;
}
.floatl {
  float: left;
}
.floatr {
  float: right;
}
.clear {
  clear: both;
}

div.main {
  padding: 20px 0px 0px 20px;
  width: 800px;
}
div.title {
  text-align: left;
  position: relative;
}
div.a {
  /*直接修改这里的width和height，事件触发后js会根据这里的定义自动生成斜线*/
  width: 60px;
  height: 40px;
  border: 1px solid #0000ff;
}

</style>
<script>
//获得css中属性的值，来源于网络
function getStyle(el,IE,FF){
var elem=document.getElementById(el)
return navigator.appName=="Microsoft Internet Explorer"?elem.currentStyle[IE]:document.defaultView.getComputedStyle(elem, "").getPropertyValue(FF)
}


//根据div的宽度和高度自定设置斜线的坐标点
function autosetline_vml() {
  w=getStyle("title","width","width").replace(/[^0-9]*/g,"")
  h=getStyle("title","height","height").replace(/[^0-9]*/g,"")
  str = "<v:line from='0,0' to='" + w + "," + h + "' >"
  str+= "<v:stroke dashstyle='solit' />"
  str+= "</v:line>"
  document.getElementById("line").innerHTML=str
}
function autosetline_div() {
  w=getStyle("title","width","width").replace(/[^0-9]*/g,"")
  h=getStyle("title","height","height").replace(/[^0-9]*/g,"")
  var str=""
  for (i=0,x=1,y=1 ; i<h ; i++,x+=1,y+=w/h) {
    str+="<div style='border:0.3px solid #000000;font-size:0px;height:1px;width:1px;background-color:#000000;position:absolute;top:"+x+"px;left:"+y+"px'></div>"
  }
  document.getElementById("line").innerHTML=str
}
</script>
</head>
<body>
<div class="main">
<ul>
  <li>
    <div class="a floatl title" id="title">
            <div style="position:absolute; z-index:11; width:100%; height:100%;" id="line">
            </div>
      <div style="position:absolute; z-index:10; height:100%; width:100%" >
        <div class="floatr">成绩</div>
        <div class="floatl" style="position:absolute; bottom:0px;">姓名</div>
        </div>
    </div>
    <div class="a floatl"></div>
    <div class="a floatl"></div>
    <div class="a floatl"></div>
  </li>
  <li>
    <div class="a floatl"></div>
    <div class="a floatl"></div>
    <div class="a floatl"></div>
    <div class="a floatl"></div>
  </li>
    <li>
      <input type="button" onclick="autosetline_vml()" value="vml画线,只适合ie" />
    </li>
    <li>
    <input type="button" onclick="autosetline_div()" value="div+css定位，用很多div模拟一条线,ie firefox opera都适合" />
    </li>
</ul>
</div>
</body>
</html>

Tags - , , , ]]>