樣式處理也許是瀏覽器中最複雜的部份，將所有細節予以封裝一定是個不錯的想法。這邊繼續 封裝事件處理 的成果，將樣式處理封裝加入，由於程式碼很多，這邊就不列出了，可以直接參考：
以下直接使用這個成果，對之前的一些範例作改寫。首先是 存取樣式資訊 中第一個範例改寫：
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#message').css({
color : '#ffffff',
backgroundColor : '#ff0000',
width : '300px',
height : '200px',
paddingLeft : '250px',
paddingTop : '150px'
});
});
</script>
</head>
<body>
<div id="message">這是一段訊息</div>
</body>
</html>
再來是 存取樣式資訊 中第二個範例：
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
width: 500px;
height: 200px;
padding-left: 250px;
padding-top: 150px;
}
</style>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#console').html(
XD('#message').css('backgroundColor')
);
});
</script>
</head>
<body>
<div id="message">這是一段訊息</div>
<span id="console"></span>
</body>
</html>
以下是 存取元素位置 的第三個範例改寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#container {
color: #ffffff;
background-color: #ff0000;
height: 50px;
position: absolute;
top: -100px;
left:-100px;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
var search = XD('#search').offset();
XD('#container').css({
left : search.left + 'px',
top : search.top + search.offsetHeight + 'px',
width: search.offsetWidth + 'px'
});
});
</script>
</head>
<body>
<div id="container">這是一段訊息</div>
<hr>
搜尋：<input id="search" type="text">
</body>
</html>
以下是 顯示、可見度與透明度 第一個範例的改寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#message {
color: #ffffff;
background-color: #ff0000;
border-width: 10px;
border-color: black;
border-style: solid;
width: 100px;
height: 50px;
padding: 50px;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#toggle').click(function() {
var messageXD = XD('#message');
if(messageXD.css('display') === 'none') {
messageXD.show();
}
else {
messageXD.hide();
}
});
});
</script>
</head>
<body>
<button id='toggle'>切換顯示狀態</button>
<hr>
這是一些文字！這是一些文字！這是一些文字！這是一些文字！這是一些文字！
<div id="message">這是訊息一</div>
這是其它文字！這是其它文字！這是其它文字！這是其它文字！這是其它文字！
</body>
</html>
以下是 顯示、可見度與透明度 第二個範例的改寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#fadeIn').click(function() {
XD('#image').fadeIn(10000);
});
XD('#fadeOut').click(function() {
XD('#image').fadeOut(10000);
});
});
</script>
</head>
<body>
<button id='fadeOut'>淡出</button>
<button id='fadeIn'>淡入</button><br>
<img id="image" src="../../images/caterpillar_small.jpg">
</body>
</html>
以下是 操作 class 屬性 中的範例改寫：
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.released {
border-width: 1px;
border-color: red;
border-style: dashed;
}
.pressed {
border-width: 5px;
border-color: black;
border-style: solid;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
XD('#logo').click(function() {
XD(this).toggleClass('released', 'pressed');
});
});
</script>
</head>
<body>
<img id="logo" class='released'
src="../../images/caterpillar_small.jpg">
</body>
</html>
以下是 取得視窗維度資訊 中的範例改寫：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN">
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
#message1 {
text-align: center;
vertical-align: middle;
color: #ffffff;
background-color: #ff0000;
width: 100px;
height: 50px;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<script type="text/javascript" src="js/gossip-0.4.js"></script>
<script type="text/javascript">
XD.bind(window, 'load', function() {
var message1XD = XD('#message1');
message1XD.opacity(0.5);
var viewport = XD.viewport();
message1XD.css({
width : viewport.width + 'px',
height: viewport.height / 2 + 'px',
paddingTop : viewport.height / 2 + 'px'
});
XD('#confirm').click(function() {
message1XD.css({
width: '0px',
height: '0px',
paddingTop: '0px',
display: 'none'
});
});
});
</script>
</head>
<body>
這些是一些文字<br>這些是一些文字<br>這些是一些文字<br>
<button>其它元件</button>
<div id="message1">
看點廣告吧！<br><br>
<button id="confirm">確定</button>
</div>
</body>
</html>