添加一个属性的setter, getter
建立一个页面
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
input{
behavior: url(bordercolor_htc.htc);
}
</style>
<script>
window.onload = function() {
var el = document.getElementById("tid")
el.borderColor = "red";
alert(el.borderColor)
}
</script>
</head>
<body>
<div>
<input type="text" id="tid" value="司徒正美" />
</div
</body>
</html>
建议一个htc文件,与刚才的页面放在同一页面上
<public:component>
<public:property name="borderColor" get="getBorderColor" put="setBorderColor" />
<script type="text/javascript">
function setBorderColor(vValue) {
element.style.border = "1px solid "+ vValue
}
function getBorderColor() {
return element.style.borderColor +"~!"
}
</script>
</public:component>
上面的可以精简成这样
<component>
<property name="borderColor" get="getBorderColor" put="setBorderColor" />
<script>
function setBorderColor(vValue) {
element.style.border = "1px solid "+ vValue
}
function getBorderColor() {
return element.style.borderColor +"~!"
}
</script>
</component>
绑定事件
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h1{
behavior: url(hover_htc.htc);
}
</style>
<script>
</script>
</head>
<body>
<div>
<h1>司徒正美</h1>
</div
</body>
</html>
对应的HTC
<component>
<public:attach event="onmouseover" onevent="over()" />
<public:attach event="onmouseout" onevent="out()" />
<script>
function over() {
this.style.color = "red"
}
function out() {
this.style.color = "blue"
}
</script>
</component>
上面的this可以省略或改成element
<component>
<public:attach event="onmouseover" onevent="over()" />
<public:attach event="onmouseout" onevent="out()" />
<script>
function over() {
style.color = "red"
}
function out() {
style.color = "blue"
}
</script>
</component>
<component>
<public:attach event="onmouseover" onevent="over()" />
<public:attach event="onmouseout" onevent="out()" />
<script>
function over() {
style.color = "red"
}
function out() {
style.color = "blue"
}
</script>
</component>
还可以进一步精简成这样
<component>
<attach event="onmouseover" handler="over" />
<attach event="onmouseout" handler="out" />
<script>
function over() {
style.color = "red"
}
function out() {
style.color = "blue"
}
</script>
</component>
HTC专用元素原文：http://www.cnblogs.com/rubylouvre/p/3820626.html