国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 開發 > 綜合 > 正文

MooTools教程(7):設置和獲取樣式表屬性

2024-07-21 02:04:23
字體：大 中 小
來源：轉載
供稿：網友

歡迎開始這一系列的教程的第七講。今天，我們來看一下如何通過mootools 1.2和我們以前幾講中的內容來操作樣式，這將給你在ui上帶來很大的控制權。處理樣式非常簡單，不過今天我們要做一些調整。例如，我們要介紹鍵值對（key-value pair）對象。我們也會講到在domready之外來傳遞變量，就像我們在關于函數的那一講中學到的一樣。從這里開始，我們會開始慢慢提高難度，介紹一些必要的編程概念。如果你是javascript新手或者第一次開始學mootools，請確保你在明白了前面的教程，你可以隨意地問我任何問題。

基本方法

.setstyle();

這個函數可以允許你設置一個元素的樣式屬性。我們在前面的一些例子中已經使用過了。你要做的就是把它放在你的 選擇器之后，那么它將改變一個元素或者多個元素的樣式屬性。

參考代碼： [復制代碼] [保存代碼]
  1. // 定義你的選擇器
  2. // 添加.setstyle方法
  3. // 指定樣式屬性和值
  4. $('body_wrap').setstyle('background-color', '#eeeeee');
  5. $$('.class_name').setstyle('background-color', '#eeeeee');
參考代碼： [復制代碼] [保存代碼]
  1. <div id="body_wrap">
  2.     <div class="class_name"></div>
  3.     <div class="class_name"></div>
  4.     <div class="class_name"></div>
  5.     <div class="class_name"></div>
  6. </div>

.getstyle();

同樣，這個方法就像它的字面意思一樣。.getstyle();將返回一個元素的一個屬性值。

參考代碼： [復制代碼] [保存代碼]
  1. // 首先，建立一個變量來保存這個樣式屬性值
  2. var stylevalue = $('body_wrap').getstyle('background-color');

如果我們在上面的例子中運行這個代碼，那么它將返回“#eeeeee”給變量stylevalue。

設置和獲取多個樣式表屬性

.setstyles();

.setstyles();就像你所想象的那樣，可以讓你一次給一個元素或者一個元素數組設置多個屬性值。為了能夠同時設置多個樣式表屬性值，.setstyles();的語法略有一點不同。

參考代碼： [復制代碼] [保存代碼]
  1. // 還是從你的選擇器開始，然后在后面加上.setstyles({
  2. $('body_wrap').setstyles({
  3.     // 下面的格式為：'property': 'value',
  4.     'width': '1000px',
  5.     'height': '1000px',
  6.     // 特別注意：最后一個屬性沒有逗號 
  7.     // 如果有逗號，將不能跨瀏覽器
  8.     'background-color': '#eeeeee'
  9. });

注意：實際上，屬性選擇器也可以不需要單引號，除非屬性名中有連接符“-”，比如在“background-color”中，為了保持簡單，給每個屬性選擇器都加上單引號更容易一些。

同時也要注意：屬性值可能更靈活多變一些（比如“100px”或者“#eeeeee”）。除了字符串（一個只有字母的串，我們會在以后的教程中更深入地講解這個），你也可以傳入數字（這可能在大多數情況下會被解釋為px）或者變量而不需要引號：

參考代碼： [復制代碼] [保存代碼]
  1. // 這個把變量firstbackgroundcolor的值設置為字符串（string）'#eeeeee'
  2. var firstbackgroundcolor = '#eeeeee';
  3.  
  4. // 你可以把一個變量傳遞給另外一個變量 
  5. // 這使得變量backgroundcolor的值也等于字符串（string）'#eeeeee'
  6. var backgroundcolor = firstbackgroundcolor;
  7.  
  8. // 這個把變量divwidth的值設置為數字（number）500
  9. var divwidth = 500;
  10.  
  11. $('body_wrap').setstyles({
  12.     // 在這種情況下，變量名是不需要用引號包圍起來的
  13.     'width': divwidth,
  14.     // 數字也一樣，不需要引號包圍
  15.     'height': 1000,
  16.     // 另外一個變量
  17.     'background-color': backgroundcolor,
  18.     // 字符串就是用單引號引起來的一系列字符組成的串
  19.     'color': 'black'
  20. });

.getstyles();

這個方法可以讓你一次獲得多個樣式屬性。這個和我們看到的上面的略有一些不同，因為它包含了多個數據集，每個數據集有一個鍵（key，屬性名）和一個值（value，屬性值）。這個數據集叫做對象，.getstyles();方法可以非常容易地把多個屬性值放入這些對象中，并可以很簡單地把它們取回來。

參考代碼： [復制代碼] [保存代碼]
  1. // 首先為你的對象定義一個變量
  2. // 然后創建一個選擇器
  3. // 然后把.getstyles添加到你的選擇器
  4. // 然后創建一個用逗號分隔開的樣式屬性列表 
  5. // 確保每個屬性都在一個單引號中
  6. var bodystyles = $('body_wrap').getstyles('width', 'height', 'background-color'); 
  7.  
  8. // 首先我們創建一個對象來保存這個屬性值
  9. // 然后我們通過指定的屬性的名（鍵）來得到一個值
  10. // 把屬性名放在兩個方括號[]之間
  11. // 并確保屬性名已經用單引號引起來了
  12. var bgstyle = bodystyles['background-color'];

如果在我們的css文件中有這樣的樣式定義：

參考代碼： [復制代碼] [保存代碼]
  1. #body_wrap {
  2.     width: 1000px;
  3.     height: 1000px;
  4.     background-color: #eeeeee;
  5. }

那么變量bgstyle將包含值“#eeeeee”。

注意：如果你要從你的樣式表對象中取得一個單獨的屬性，首先取得一個對象變量（在這個例子中是“bodystyles”），然后使用方括號和單引號（['']），最后填入屬性名key（如width或者background-color）。就這么簡單！

代碼示例

在這個例子中，我們將使用我們剛才在上面學到的一些方法來獲取和設置樣式。在注意樣式屬性操作用法的同時，也要特別注意它本身的結構。為了把我們的函數從domready中獨立出來，我們需要把那些變量傳遞到domready事件的函數中。我們通過給domready里面的函數傳遞一個參數來實現這個。注意點擊（click）事件使用了匿名方法——這可以讓我們從domready事件中把變量傳遞到外面的函數中。如果你第一遍沒有看懂，請不要著急，下面的例子可能會讓這些更清楚更明白一些：

參考代碼： [復制代碼] [保存代碼]
  1. // 這里是一些函數
  2.  
  3. // 注意這個函數有一個參數："bgcolor"
  4. // 這個是從domready事件中傳遞過來的
  5. var seebgcolor = function(bgcolor) { 
  6.     alert(bgcolor);
  7. }
  8.  
  9. var seebordercolor = function(bordercolor) {
  10.     alert(bordercolor);
  11. }
  12.  
  13. // 我們把playdiv傳遞給這個函數，從而可以操作這個元素
  14. // 也可以讓我們避免重復地使用選擇器
  15. // 在處理復雜的選擇器時很有用
  16. var seedivwidth = function(playdiv) {
  17.     // 我們再次開始獲得樣式屬性
  18.     // 和我們在domready中用的getstyles獨立開來
  19.     // 因為我們想使用當前的值
  20.     // 這可以保持width是準確的
  21.     // 即使它在domready事件之后被改變了
  22.     var currentdivwidth = playdiv.getstyle('width');
  23.     alert(currentdivwidth);
  24. }
  25.  
  26. var seedivheight = function(playdiv) {
  27.     var currentdivheight = playdiv.getstyle('height');
  28.     alert(currentdivheight);
  29. }
  30.  
  31. var setdivwidth = function(playdiv) {
  32.     playdiv.setstyle('width', '50px'); 
  33. }
  34.  
  35. var setdivheight = function(playdiv) {
  36.     playdiv.setstyle('height', '50px');
  37. }
  38.  
  39. // 注意，在這個時候，這個變量可以取任何名稱
  40. // 它會傳遞任何值，value或者element或者你的任何東西
  41. // 它將會取代任何在domready里面傳過來的東西
  42. var resetsize = function(foo) {
  43.     foo.setstyles({
  44.         'height': 200,
  45.         'width': 200
  46.     });
  47. }
  48.  
  49. window.addevent('domready', function() {
  50.     // 因為我們要多次使用這個選擇器，所以我們把它賦值給一個變量
  51.     var playdiv = $('playstyles');
  52.  
  53.     // 這里我們創建了一個包含幾個屬性的對象
  54.     var bodystyles = playdiv.getstyles('background-color', 'border-bottom-color'); 
  55.  
  56.     // 你可以通過調用屬性名來獲得樣式值然后傳遞給一個變量
  57.  
  58.     var bgcolor = bodystyles['background-color']; 
  59.  
  60.     // 這里我們使用了一個匿名函數，從而我們可以把參數傳遞給domready外面的函數 
  61.     $('bgcolor').addevent('click', function(){
  62.         seebgcolor(bgcolor);
  63.     });
  64.  
  65.     $('border_color').addevent('click', function(){
  66.         // 除了可以把一個樣式屬性傳遞給一個變量 
  67.         // 你還可以在這里直接調用
  68.         seebordercolor(bodystyles['border-bottom-color']);
  69.     });
  70.  
  71.     $('div_width').addevent('click', function(){
  72.         seedivwidth(playdiv);
  73.     });
  74.  
  75.     $('div_height').addevent('click', function(){
  76.         seedivheight(playdiv);
  77.     });
  78.  
  79.     $('set_width').addevent('click', function(){
  80.         setdivwidth(playdiv);
  81.     });
  82.  
  83.     $('set_height').addevent('click', function(){
  84.         setdivheight(playdiv);
  85.     }); 
  86.  
  87.     $('reset').addevent('click', function(){
  88.         resetsize(playdiv);
  89.     });
  90. });

這里是html代碼：

參考代碼： [復制代碼] [保存代碼]
  1. <div id="playstyles"> </div>
  2.     <br />
  3.     <button id="bgcolor">see background-color</button>
  4.     <button id="border_color">see border-bottom-color</button><br /><br />
  5.     <button id="div_width">see width</button>
  6.     <button id="div_height">see height</button><br /><br />
  7.     <button id="set_width">set weight to 50px</button>
  8.     <button id="set_height">set height to 50px</button><br /><br />
  9.     <button id="reset">reset size</button>

這里是css代碼

參考代碼： [復制代碼] [保存代碼]
  1. #playstyles {
  2.     width: 200px
  3.     height: 200px
  4.     background-color: #eeeeee
  5.     border: 3px solid #dd97a1
  6. }

 








 

更多學習...

下載一個包含你開始所需要的所用東西的zip包

包含mootools 1.2核心庫，一個外部javascript文件，一個簡單的html頁面和一個css文件。

更多關于樣式表的內容

要學習更多關于樣式表的內容，請查閱mootools文檔中的element.style部分。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板： 仲巴县| 阿克苏市| 嘉荫县| 景洪市| 梁山县| 佛学| 六枝特区| 五河县| 祁连县| 文昌市| 盘山县| 潜江市| 黔西| 吴堡县| 西城区| 景宁| 鸡东县| 漾濞| 武陟县| 沁源县| 平遥县| 长泰县| 翼城县| 乌鲁木齐市| 乐昌市| 通化市| 永济市| 武宁县| 伊川县| 惠水县| 临邑县| 永州市| 咸阳市| 秦皇岛市| 余江县| 岳普湖县| 莒南县| 商南县| 南京市| 南康市| 南通市|