|
<!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" >
<head>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script type="text/ecmascript">
<![CDATA[
function showRectColor() {
alert(document.getElementById("myBlueRect").getAttributeNS(null,"fill"));
}
function showRectArea(evt) {
var width = parseFloat(evt.target.getAttributeNS(null,"width"));
var height = parseFloat(evt.target.getAttributeNS(null,"height"));
alert("The rectangle area is: " + (width * height));
}
function showRootChildrenNr() {
alert("Nr of Children: "+document.documentElement.childNodes.length);
}
]]>
</script>
<g>
<rect x="40" y="20" fill="blue"/>
<text x="40" y="100">Click on this text to show rectangle color.</text>
<text x="40" y="130">Click on rectangle to show rectangle area.</text>
<text x="40" y="160">Click on this text to show the number of child
<tspan x="40" dy="20">elements of the root element.</tspan></text>
</g>
</svg>
</body>
</html>
在这个例子中，列举了常见的获取DOM对象的方式：
1. 通过document.getElementById或者document.getElementByClassName之类的方法获取对象；
2. 通过document.documentElement或者document.rootElement获取document对象；
3. 通过事件参数evt.target获取产生事件的对象。这种方式的优点就是不使用id就可以获取到产生事件的对象。
其余的脚本基本和普通的DOM是一样的。
实用参考：
脚本索引：(v=vs.85).aspx
开发中心：https://developer.mozilla.org/en/SVG
热门参考：
官方文档：
DOM Core Object API：
SVG DOM常用属性和方法:,
（编辑：焦作站长网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
