HTML DOM 快速導覽 - 樣式設定的屬性 clip

CSS 樣式表 (cascading style sheets) 的 clip 性質 (property) 可控制 HTML 元素 (element) 內容的剪裁方式，亦可由 JavaScript 程式取得元素物件，再用 style 的屬性 (attribute) clip 進行設定。



clip 利用 rect() 函數 (function) 進行設定，形式如下
clip: rect(top, right, bottom, left);


rect() 需要四個數字參數， top 為元素左上角往下要裁掉的臨界範圍，也就是往下裁掉 top ， right 為元素左上角往右要裁掉的臨界範圍，也就是往右到 right 為止，其餘裁掉， bottom 為元素左上角往下要裁掉的臨界範圍，也就是往下到 bottom 為止，其餘裁掉， left 為元素左上角往開始裁掉的臨界範圍，也就是往左裁掉 left 。


除了數字之外，也可以使用 auto 關鍵字，交給瀏覽器決定。


舉例如下
function run00() {
    var demo = document.getElementById("a");
    demo.style.clip = "rect(10px, 270px, 131px, 10px)";
}

/* 《程式語言教學誌》的範例程式
    http://pydoing.blogspot.com/
    檔名：style091.js
    功能：示範 JavaScript 程式 
    作者：張凱慶
    時間：西元 2011 年 8 月 */


此例取得 id 屬性為 a 的元素，然後對該元素進行剪裁
var demo = document.getElementById("a");
demo.style.clip = "rect(10px, 270px, 131px, 10px)";


我們以下面的 HTML 文件載入
<html>
<head>
<title>網頁標題</title>
<script src="style091.js" type="text/javascript"></script>
<style>
.example {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 400px;
    height: 160px;
    border: 2px solid black;
}
input {
    position: absolute;
    top: 60%;
    left: 60%;
}
</style>
</head>
<body>
<div class="example" id="a">
You ever have that feeling where you're not sure if you're awake or still dreaming?
A prison for your mind.
Free your mind.
Believe the unbelievable.
There is no spoon.
I can only show you the door, you have to walk through it.
Choice. The problem is choice.
Then tomorrow we may all be dead, but how would that be different from any other day?
I have dreamed a dream, but now that dream has gone from me.
Choice is an illusion, created between those with power, and those without.
Because I choose to.
Everything that has a beginning has an end.</div>
<input type="button" value="RUN" onclick="run00();">
</body>
</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：style091.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2011 年 8 月 -->


瀏覽器 (browser) 開啟，點擊 RUN 後如下結果



中英文術語對照
CSS 樣式表cascading style sheets
性質property
元素element
屬性attribute
瀏覽器browser


您可以繼續參考
CSS 範例

樣式設定物件 style


相關目錄
HTML DOM 快速導覽
JavaScript 教材
首頁


參考資料
https://developer.mozilla.org/en/DOM/CSS
https://developer.mozilla.org/en/CSS/clip
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)