{"id":607,"date":"2008-10-19T23:10:37","date_gmt":"2008-10-19T15:10:37","guid":{"rendered":"http:\/\/fdream.net\/blog\/article\/607.aspx"},"modified":"2008-10-19T23:10:18","modified_gmt":"2008-10-19T15:10:18","slug":"Mootools+1.2%e6%95%99%e7%a8%8b(7)%e2%80%94%e2%80%94%e8%ae%be%e7%bd%ae%e5%92%8c%e8%8e%b7%e5%8f%96%e6%a0%b7%e5%bc%8f%e8%a1%a8%e5%b1%9e%e6%80%a7","status":"publish","type":"post","link":"https:\/\/fdream.net\/blog\/article\/607","title":{"rendered":"Mootools 1.2\u6559\u7a0b(7)\u2014\u2014\u8bbe\u7f6e\u548c\u83b7\u53d6\u6837\u5f0f\u8868\u5c5e\u6027"},"content":{"rendered":"<p>\u539f\u6587\u5730\u5740\uff1a<a href=\"http:\/\/www.consideropen.com\/blog\/2008\/08\/30-days-of-mootools-12-tutorials-day-7-set-and-get-style-properties\/\" target=\"_blank\" title=\"30 Days of Mootools 1.2 Tutorials - Day 7 - Set and Get Style Properties\">30 Days of Mootools 1.2 Tutorials &#8211; Day 7 &#8211; Set and Get Style Properties<\/a><\/p>\n<h2>\u8bbe\u7f6e\u548c\u83b7\u53d6\u6837\u5f0f\u8868\u5c5e\u6027<\/h2>\n<p>\u8bf7\u5c0a\u91cd\u4e2a\u4eba\u52b3\u52a8\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\uff1ahttp:\/\/fdream.net\uff0c\u8bd1\u8005\uff1aFdream<\/p>\n<p>\u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u51c6\u5907\u597d\u5f00\u59cb\u8fd9\u4e00\u8bb2\uff0c\u8bf7\u53c2\u8003\u8fd9\u4e00\u7cfb\u5217\u7684\u6559\u7a0b\uff0c\u8fd9\u91cc\u662f<a href=\"http:\/\/fdream.net\/blog\/article\/605.aspx\" target=\"_blank\" title=\"\u300aMooTools 1.2\u7cfb\u5217\u6559\u7a0b\u76ee\u5f55\u300b\">\u300aMooTools 1.2\u7cfb\u5217\u6559\u7a0b\u76ee\u5f55\u300b<\/a>\u3002<\/p>\n<p>\u6b22\u8fce\u5f00\u59cb\u8fd9\u4e00\u7cfb\u5217\u7684\u6559\u7a0b\u7684\u7b2c\u4e03\u8bb2\u3002\u4eca\u5929\uff0c\u6211\u4eec\u6765\u770b\u4e00\u4e0b\u5982\u4f55\u901a\u8fc7MooTools 1.2\u548c\u6211\u4eec\u4ee5\u524d\u51e0\u8bb2\u4e2d\u7684\u5185\u5bb9\u6765\u64cd\u4f5c\u6837\u5f0f\uff0c\u8fd9\u5c06\u7ed9\u4f60\u5728UI\u4e0a\u5e26\u6765\u5f88\u5927\u7684\u63a7\u5236\u6743\u3002\u5904\u7406\u6837\u5f0f\u975e\u5e38\u7b80\u5355\uff0c\u4e0d\u8fc7\u4eca\u5929\u6211\u4eec\u8981\u505a\u4e00\u4e9b\u8c03\u6574\u3002\u4f8b\u5982\uff0c\u6211\u4eec\u8981\u4ecb\u7ecd\u952e\u503c\u5bf9\uff08key-value pair\uff09\u5bf9\u8c61\u3002\u6211\u4eec\u4e5f\u4f1a\u8bb2\u5230\u5728domready\u4e4b\u5916\u6765\u4f20\u9012\u53d8\u91cf\uff0c\u5c31\u50cf\u6211\u4eec\u5728<a href=\"http:\/\/fdream.net\/blog\/article\/602.aspx\" target=\"_blank\" title=\"\u5173\u4e8e\u51fd\u6570\u7684\u90a3\u4e00\u8bb2\">\u5173\u4e8e\u51fd\u6570\u7684\u90a3\u4e00\u8bb2<\/a>\u4e2d\u5b66\u5230\u7684\u4e00\u6837\u3002\u4ece\u8fd9\u91cc\u5f00\u59cb\uff0c\u6211\u4eec\u4f1a\u5f00\u59cb\u6162\u6162\u63d0\u9ad8\u96be\u5ea6\uff0c\u4ecb\u7ecd\u4e00\u4e9b\u5fc5\u8981\u7684\u7f16\u7a0b\u6982\u5ff5\u3002\u5982\u679c\u4f60\u662fJavaScript\u65b0\u624b\u6216\u8005\u7b2c\u4e00\u6b21\u5f00\u59cb\u5b66MooTools\uff0c\u8bf7\u786e\u4fdd\u4f60\u5728\u660e\u767d\u4e86\u524d\u9762\u7684\u6559\u7a0b\uff0c\u4f60\u53ef\u4ee5\u968f\u610f\u5730\u95ee\u6211\u4efb\u4f55\u95ee\u9898\u3002<\/p>\n<h3>\u57fa\u672c\u65b9\u6cd5<\/h3>\n<p><b>.setStyle();<\/b><\/p>\n<p>\u8fd9\u4e2a\u51fd\u6570\u53ef\u4ee5\u5141\u8bb8\u4f60\u8bbe\u7f6e\u4e00\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u5c5e\u6027\u3002\u6211\u4eec\u5728\u524d\u9762\u7684\u4e00\u4e9b\u4f8b\u5b50\u4e2d\u5df2\u7ecf\u4f7f\u7528\u8fc7\u4e86\u3002\u4f60\u8981\u505a\u7684\u5c31\u662f\u628a\u5b83\u653e\u5728\u4f60\u7684 \u9009\u62e9\u5668\u4e4b\u540e\uff0c\u90a3\u4e48\u5b83\u5c06\u6539\u53d8\u4e00\u4e2a\u5143\u7d20\u6216\u8005\u591a\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u5c5e\u6027\u3002<\/p>\n<p><pre lang=\"javascript\">\n\/\/ \u5b9a\u4e49\u4f60\u7684\u9009\u62e9\u5668\n\/\/ \u6dfb\u52a0.setStyle\u65b9\u6cd5\n\/\/ \u6307\u5b9a\u6837\u5f0f\u5c5e\u6027\u548c\u503c\n$('body_wrap').setStyle('background-color', '#eeeeee');\n$$('.class_name').setStyle('background-color', '#eeeeee');\n<\/pre>\n<\/p>\n<p><pre lang=\"html\">\n&lt;div id=&quot;body_wrap&quot;&gt;\n    &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt;\n    &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/pre>\n<\/p>\n<p><b>.getStyle();<\/b><\/p>\n<p>\u540c\u6837\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u5c31\u50cf\u5b83\u7684\u5b57\u9762\u610f\u601d\u4e00\u6837\u3002.getStyle();\u5c06\u8fd4\u56de\u4e00\u4e2a\u5143\u7d20\u7684\u4e00\u4e2a\u5c5e\u6027\u503c\u3002<\/p>\n<p><pre lang=\"javascript\">\n\/\/ \u9996\u5148\uff0c\u5efa\u7acb\u4e00\u4e2a\u53d8\u91cf\u6765\u4fdd\u5b58\u8fd9\u4e2a\u6837\u5f0f\u5c5e\u6027\u503c\nvar styleValue = $('body_wrap').getStyle('background-color');\n<\/pre>\n<\/p>\n<p>\u5982\u679c\u6211\u4eec\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\u8fd0\u884c\u8fd9\u4e2a\u4ee3\u7801\uff0c\u90a3\u4e48\u5b83\u5c06\u8fd4\u56de\u201c#eeeeee\u201d\u7ed9\u53d8\u91cfstyleValue\u3002<\/p>\n<h3>\u8bbe\u7f6e\u548c\u83b7\u53d6\u591a\u4e2a\u6837\u5f0f\u8868\u5c5e\u6027<\/h3>\n<p><b>.setStyles();<\/b><\/p>\n<p>.setStyles();\u5c31\u50cf\u4f60\u6240\u60f3\u8c61\u7684\u90a3\u6837\uff0c\u53ef\u4ee5\u8ba9\u4f60\u4e00\u6b21\u7ed9\u4e00\u4e2a\u5143\u7d20\u6216\u8005\u4e00\u4e2a\u5143\u7d20\u6570\u7ec4\u8bbe\u7f6e\u591a\u4e2a\u5c5e\u6027\u503c\u3002\u4e3a\u4e86\u80fd\u591f\u540c\u65f6\u8bbe\u7f6e\u591a\u4e2a\u6837\u5f0f\u8868\u5c5e\u6027\u503c\uff0c.setStyles();\u7684\u8bed\u6cd5\u7565\u6709\u4e00\u70b9\u4e0d\u540c\u3002<\/p>\n<p><pre lang=\"javascript\">\n\/\/ \u8fd8\u662f\u4ece\u4f60\u7684\u9009\u62e9\u5668\u5f00\u59cb\uff0c\u7136\u540e\u5728\u540e\u9762\u52a0\u4e0a.setStyles({\n$('body_wrap').setStyles({\n    \/\/ \u4e0b\u9762\u7684\u683c\u5f0f\u4e3a\uff1a'property': 'value',\n    'width': '1000px',\n    'height': '1000px',\n    \/\/ \u7279\u522b\u6ce8\u610f\uff1a\u6700\u540e\u4e00\u4e2a\u5c5e\u6027\u6ca1\u6709\u9017\u53f7 \n    \/\/ \u5982\u679c\u6709\u9017\u53f7\uff0c\u5c06\u4e0d\u80fd\u8de8\u6d4f\u89c8\u5668\n    'background-color': '#eeeeee'\n});\n<\/pre>\n<\/p>\n<p><b>\u6ce8\u610f<\/b>\uff1a\u5b9e\u9645\u4e0a\uff0c\u5c5e\u6027\u9009\u62e9\u5668\u4e5f\u53ef\u4ee5\u4e0d\u9700\u8981\u5355\u5f15\u53f7\uff0c\u9664\u975e\u5c5e\u6027\u540d\u4e2d\u6709\u8fde\u63a5\u7b26\u201c-\u201d\uff0c\u6bd4\u5982\u5728\u201cbackground-color\u201d\u4e2d\uff0c\u4e3a\u4e86\u4fdd\u6301\u7b80\u5355\uff0c\u7ed9\u6bcf\u4e2a\u5c5e\u6027\u9009\u62e9\u5668\u90fd\u52a0\u4e0a\u5355\u5f15\u53f7\u66f4\u5bb9\u6613\u4e00\u4e9b\u3002<\/p>\n<p><b>\u540c\u65f6\u4e5f\u8981\u6ce8\u610f<\/b>\uff1a\u5c5e\u6027\u503c\u53ef\u80fd\u66f4\u7075\u6d3b\u591a\u53d8\u4e00\u4e9b\uff08\u6bd4\u5982\u201c100px\u201d\u6216\u8005\u201c#eeeeee\u201d\uff09\u3002\u9664\u4e86\u5b57\u7b26\u4e32\uff08\u4e00\u4e2a\u53ea\u6709\u5b57\u6bcd\u7684\u4e32\uff0c\u6211\u4eec\u4f1a\u5728\u4ee5\u540e\u7684\u6559\u7a0b\u4e2d\u66f4\u6df1\u5165\u5730\u8bb2\u89e3\u8fd9\u4e2a\uff09\uff0c\u4f60\u4e5f\u53ef\u4ee5\u4f20\u5165\u6570\u5b57\uff08\u8fd9\u53ef\u80fd\u5728\u5927\u591a\u6570\u60c5\u51b5\u4e0b\u4f1a\u88ab\u89e3\u91ca\u4e3apx\uff09\u6216\u8005\u53d8\u91cf\u800c\u4e0d\u9700\u8981\u5f15\u53f7\uff1a<\/p>\n<p><pre lang=\"javascript\">\n\/\/ \u8fd9\u4e2a\u628a\u53d8\u91cffirstBackgroundColor\u7684\u503c\u8bbe\u7f6e\u4e3a\u5b57\u7b26\u4e32\uff08STRING\uff09'#eeeeee'\nvar firstBackgroundColor = '#eeeeee';\n \n\/\/ \u4f60\u53ef\u4ee5\u628a\u4e00\u4e2a\u53d8\u91cf\u4f20\u9012\u7ed9\u53e6\u5916\u4e00\u4e2a\u53d8\u91cf \n\/\/ \u8fd9\u4f7f\u5f97\u53d8\u91cfbackgroundColor\u7684\u503c\u4e5f\u7b49\u4e8e\u5b57\u7b26\u4e32\uff08string\uff09'#eeeeee'\nvar backgroundColor = firstBackgroundColor;\n \n\/\/ \u8fd9\u4e2a\u628a\u53d8\u91cfdivWidth\u7684\u503c\u8bbe\u7f6e\u4e3a\u6570\u5b57\uff08NUMBER\uff09500\nvar divWidth = 500;\n \n$('body_wrap').setStyles({\n    \/\/ \u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u53d8\u91cf\u540d\u662f\u4e0d\u9700\u8981\u7528\u5f15\u53f7\u5305\u56f4\u8d77\u6765\u7684\n    'width': divWidth,\n    \/\/ \u6570\u5b57\u4e5f\u4e00\u6837\uff0c\u4e0d\u9700\u8981\u5f15\u53f7\u5305\u56f4\n    'height': 1000,\n    \/\/ \u53e6\u5916\u4e00\u4e2a\u53d8\u91cf\n    'background-color': backgroundColor,\n    \/\/ \u5b57\u7b26\u4e32\u5c31\u662f\u7528\u5355\u5f15\u53f7\u5f15\u8d77\u6765\u7684\u4e00\u7cfb\u5217\u5b57\u7b26\u7ec4\u6210\u7684\u4e32\n    'color': 'black'\n});\n<\/pre>\n<\/p>\n<p><b>.getStyles();<\/b><\/p>\n<p>\u8fd9\u4e2a\u65b9\u6cd5\u53ef\u4ee5\u8ba9\u4f60\u4e00\u6b21\u83b7\u5f97\u591a\u4e2a\u6837\u5f0f\u5c5e\u6027\u3002\u8fd9\u4e2a\u548c\u6211\u4eec\u770b\u5230\u7684\u4e0a\u9762\u7684\u7565\u6709\u4e00\u4e9b\u4e0d\u540c\uff0c\u56e0\u4e3a\u5b83\u5305\u542b\u4e86\u591a\u4e2a\u6570\u636e\u96c6\uff0c\u6bcf\u4e2a\u6570\u636e\u96c6\u6709\u4e00\u4e2a\u952e\uff08key\uff0c\u5c5e\u6027\u540d\uff09\u548c\u4e00\u4e2a\u503c\uff08value\uff0c\u5c5e\u6027\u503c\uff09\u3002\u8fd9\u4e2a\u6570\u636e\u96c6\u53eb\u505a\u5bf9\u8c61\uff0c.getStyles();\u65b9\u6cd5\u53ef\u4ee5\u975e\u5e38\u5bb9\u6613\u5730\u628a\u591a\u4e2a\u5c5e\u6027\u503c\u653e\u5165\u8fd9\u4e9b\u5bf9\u8c61\u4e2d\uff0c\u5e76\u53ef\u4ee5\u5f88\u7b80\u5355\u5730\u628a\u5b83\u4eec\u53d6\u56de\u6765\u3002<\/p>\n<p><pre lang=\"javascript\">\n\/\/ \u9996\u5148\u4e3a\u4f60\u7684\u5bf9\u8c61\u5b9a\u4e49\u4e00\u4e2a\u53d8\u91cf\n\/\/ \u7136\u540e\u521b\u5efa\u4e00\u4e2a\u9009\u62e9\u5668\n\/\/ \u7136\u540e\u628a.getStyles\u6dfb\u52a0\u5230\u4f60\u7684\u9009\u62e9\u5668\n\/\/ \u7136\u540e\u521b\u5efa\u4e00\u4e2a\u7528\u9017\u53f7\u5206\u9694\u5f00\u7684\u6837\u5f0f\u5c5e\u6027\u5217\u8868 \n\/\/ \u786e\u4fdd\u6bcf\u4e2a\u5c5e\u6027\u90fd\u5728\u4e00\u4e2a\u5355\u5f15\u53f7\u4e2d\nvar bodyStyles = $('body_wrap').getStyles('width', 'height', 'background-color'); \n \n\/\/ \u9996\u5148\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u5bf9\u8c61\u6765\u4fdd\u5b58\u8fd9\u4e2a\u5c5e\u6027\u503c\n\/\/ \u7136\u540e\u6211\u4eec\u901a\u8fc7\u6307\u5b9a\u7684\u5c5e\u6027\u7684\u540d\uff08\u952e\uff09\u6765\u5f97\u5230\u4e00\u4e2a\u503c\n\/\/ \u628a\u5c5e\u6027\u540d\u653e\u5728\u4e24\u4e2a\u65b9\u62ec\u53f7[]\u4e4b\u95f4\n\/\/ \u5e76\u786e\u4fdd\u5c5e\u6027\u540d\u5df2\u7ecf\u7528\u5355\u5f15\u53f7\u5f15\u8d77\u6765\u4e86\nvar bgStyle = bodyStyles['background-color'];\n<\/pre>\n<\/p>\n<p>\u5982\u679c\u5728\u6211\u4eec\u7684CSS\u6587\u4ef6\u4e2d\u6709\u8fd9\u6837\u7684\u6837\u5f0f\u5b9a\u4e49\uff1a<\/p>\n<p><pre lang=\"css\">\n#body_wrap {\n    width: 1000px;\n    height: 1000px;\n    background-color: #eeeeee;\n}\n<\/pre>\n<\/p>\n<p>\u90a3\u4e48\u53d8\u91cfbgStyle\u5c06\u5305\u542b\u503c\u201c#eeeeee\u201d\u3002<\/p>\n<p><b>\u6ce8\u610f<\/b>\uff1a\u5982\u679c\u4f60\u8981\u4ece\u4f60\u7684\u6837\u5f0f\u8868\u5bf9\u8c61\u4e2d\u53d6\u5f97\u4e00\u4e2a\u5355\u72ec\u7684\u5c5e\u6027\uff0c\u9996\u5148\u53d6\u5f97\u4e00\u4e2a\u5bf9\u8c61\u53d8\u91cf\uff08\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\u662f\u201cbodyStyles\u201d\uff09\uff0c\u7136\u540e\u4f7f\u7528\u65b9\u62ec\u53f7\u548c\u5355\u5f15\u53f7\uff08[&#8221;]\uff09\uff0c\u6700\u540e\u586b\u5165\u5c5e\u6027\u540dkey\uff08\u5982width\u6216\u8005background-color\uff09\u3002\u5c31\u8fd9\u4e48\u7b80\u5355\uff01<\/p>\n<h3>\u4ee3\u7801\u793a\u4f8b<\/h3>\n<p>\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u6211\u4eec\u521a\u624d\u5728\u4e0a\u9762\u5b66\u5230\u7684\u4e00\u4e9b\u65b9\u6cd5\u6765\u83b7\u53d6\u548c\u8bbe\u7f6e\u6837\u5f0f\u3002\u5728\u6ce8\u610f\u6837\u5f0f\u5c5e\u6027\u64cd\u4f5c\u7528\u6cd5\u7684\u540c\u65f6\uff0c\u4e5f\u8981\u7279\u522b\u6ce8\u610f\u5b83\u672c\u8eab\u7684\u7ed3\u6784\u3002\u4e3a\u4e86\u628a\u6211\u4eec\u7684\u51fd\u6570\u4ecedomready\u4e2d\u72ec\u7acb\u51fa\u6765\uff0c\u6211\u4eec\u9700\u8981\u628a\u90a3\u4e9b\u53d8\u91cf\u4f20\u9012\u5230domready\u4e8b\u4ef6\u7684\u51fd\u6570\u4e2d\u3002\u6211\u4eec\u901a\u8fc7\u7ed9domready\u91cc\u9762\u7684\u51fd\u6570\u4f20\u9012\u4e00\u4e2a\u53c2\u6570\u6765\u5b9e\u73b0\u8fd9\u4e2a\u3002\u6ce8\u610f\u70b9\u51fb\uff08click\uff09\u4e8b\u4ef6\u4f7f\u7528\u4e86\u533f\u540d\u65b9\u6cd5\u2014\u2014\u8fd9\u53ef\u4ee5\u8ba9\u6211\u4eec\u4ecedomready\u4e8b\u4ef6\u4e2d\u628a\u53d8\u91cf\u4f20\u9012\u5230\u5916\u9762\u7684\u51fd\u6570\u4e2d\u3002\u5982\u679c\u4f60\u7b2c\u4e00\u904d\u6ca1\u6709\u770b\u61c2\uff0c\u8bf7\u4e0d\u8981\u7740\u6025\uff0c\u4e0b\u9762\u7684\u4f8b\u5b50\u53ef\u80fd\u4f1a\u8ba9\u8fd9\u4e9b\u66f4\u6e05\u695a\u66f4\u660e\u767d\u4e00\u4e9b\uff1a<\/p>\n<p><pre lang=\"javascript\">\n\/\/ \u8fd9\u91cc\u662f\u4e00\u4e9b\u51fd\u6570\n \n\/\/ \u6ce8\u610f\u8fd9\u4e2a\u51fd\u6570\u6709\u4e00\u4e2a\u53c2\u6570\uff1a&quot;bgColor&quot;\n\/\/ \u8fd9\u4e2a\u662f\u4ecedomready\u4e8b\u4ef6\u4e2d\u4f20\u9012\u8fc7\u6765\u7684\nvar seeBgColor = function(bgColor) { \n    alert(bgColor);\n}\n \nvar seeBorderColor = function(borderColor) {\n    alert(borderColor);\n}\n \n\/\/ \u6211\u4eec\u628aplayDiv\u4f20\u9012\u7ed9\u8fd9\u4e2a\u51fd\u6570\uff0c\u4ece\u800c\u53ef\u4ee5\u64cd\u4f5c\u8fd9\u4e2a\u5143\u7d20\n\/\/ \u4e5f\u53ef\u4ee5\u8ba9\u6211\u4eec\u907f\u514d\u91cd\u590d\u5730\u4f7f\u7528\u9009\u62e9\u5668\n\/\/ \u5728\u5904\u7406\u590d\u6742\u7684\u9009\u62e9\u5668\u65f6\u5f88\u6709\u7528\nvar seeDivWidth = function(playDiv) {\n    \/\/ \u6211\u4eec\u518d\u6b21\u5f00\u59cb\u83b7\u5f97\u6837\u5f0f\u5c5e\u6027\n    \/\/ \u548c\u6211\u4eec\u5728domready\u4e2d\u7528\u7684getStyles\u72ec\u7acb\u5f00\u6765\n    \/\/ \u56e0\u4e3a\u6211\u4eec\u60f3\u4f7f\u7528\u5f53\u524d\u7684\u503c\n    \/\/ \u8fd9\u53ef\u4ee5\u4fdd\u6301width\u662f\u51c6\u786e\u7684\n    \/\/ \u5373\u4f7f\u5b83\u5728domready\u4e8b\u4ef6\u4e4b\u540e\u88ab\u6539\u53d8\u4e86\n    var currentDivWidth = playDiv.getStyle('width');\n    alert(currentDivWidth);\n}\n \nvar seeDivHeight = function(playDiv) {\n    var currentDivHeight = playDiv.getStyle('height');\n    alert(currentDivHeight);\n}\n \nvar setDivWidth = function(playDiv) {\n    playDiv.setStyle('width', '50px'); \n}\n \nvar setDivHeight = function(playDiv) {\n    playDiv.setStyle('height', '50px');\n}\n \n\/\/ \u6ce8\u610f\uff0c\u5728\u8fd9\u4e2a\u65f6\u5019\uff0c\u8fd9\u4e2a\u53d8\u91cf\u53ef\u4ee5\u53d6\u4efb\u4f55\u540d\u79f0\n\/\/ \u5b83\u4f1a\u4f20\u9012\u4efb\u4f55\u503c\uff0cvalue\u6216\u8005element\u6216\u8005\u4f60\u7684\u4efb\u4f55\u4e1c\u897f\n\/\/ \u5b83\u5c06\u4f1a\u53d6\u4ee3\u4efb\u4f55\u5728domready\u91cc\u9762\u4f20\u8fc7\u6765\u7684\u4e1c\u897f\nvar resetSIze = function(foo) {\n    foo.setStyles({\n        'height': 200,\n        'width': 200\n    });\n}\n \nwindow.addEvent('domready', function() {\n    \/\/ \u56e0\u4e3a\u6211\u4eec\u8981\u591a\u6b21\u4f7f\u7528\u8fd9\u4e2a\u9009\u62e9\u5668\uff0c\u6240\u4ee5\u6211\u4eec\u628a\u5b83\u8d4b\u503c\u7ed9\u4e00\u4e2a\u53d8\u91cf\n    var playDiv = $('playstyles');\n \n    \/\/ \u8fd9\u91cc\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u5305\u542b\u51e0\u4e2a\u5c5e\u6027\u7684\u5bf9\u8c61\n    var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); \n \n    \/\/ \u4f60\u53ef\u4ee5\u901a\u8fc7\u8c03\u7528\u5c5e\u6027\u540d\u6765\u83b7\u5f97\u6837\u5f0f\u503c\u7136\u540e\u4f20\u9012\u7ed9\u4e00\u4e2a\u53d8\u91cf\n \n    var bgColor = bodyStyles['background-color']; \n \n    \/\/ \u8fd9\u91cc\u6211\u4eec\u4f7f\u7528\u4e86\u4e00\u4e2a\u533f\u540d\u51fd\u6570\uff0c\u4ece\u800c\u6211\u4eec\u53ef\u4ee5\u628a\u53c2\u6570\u4f20\u9012\u7ed9domready\u5916\u9762\u7684\u51fd\u6570 \n    $('bgcolor').addEvent('click', function(){\n        seeBgColor(bgColor);\n    });\n \n    $('border_color').addEvent('click', function(){\n        \/\/ \u9664\u4e86\u53ef\u4ee5\u628a\u4e00\u4e2a\u6837\u5f0f\u5c5e\u6027\u4f20\u9012\u7ed9\u4e00\u4e2a\u53d8\u91cf \n        \/\/ \u4f60\u8fd8\u53ef\u4ee5\u5728\u8fd9\u91cc\u76f4\u63a5\u8c03\u7528\n        seeBorderColor(bodyStyles['border-bottom-color']);\n    });\n \n    $('div_width').addEvent('click', function(){\n        seeDivWidth(playDiv);\n    });\n \n    $('div_height').addEvent('click', function(){\n        seeDivHeight(playDiv);\n    });\n \n    $('set_width').addEvent('click', function(){\n        setDivWidth(playDiv);\n    });\n \n    $('set_height').addEvent('click', function(){\n        setDivHeight(playDiv);\n    }); \n \n    $('reset').addEvent('click', function(){\n        resetSIze(playDiv);\n    });\n});\n<\/pre>\n<\/p>\n<p>\u8fd9\u91cc\u662fHTML\u4ee3\u7801\uff1a<\/p>\n<p><pre lang=\"html\">\n&lt;div id=&quot;playstyles&quot;&gt; &lt;\/div&gt;\n    &lt;br \/&gt;\n    &lt;button id=&quot;bgcolor&quot;&gt;See background-color&lt;\/button&gt;\n    &lt;button id=&quot;border_color&quot;&gt;See border-bottom-color&lt;\/button&gt;&lt;br \/&gt;&lt;br \/&gt;\n    &lt;button id=&quot;div_width&quot;&gt;See width&lt;\/button&gt;\n    &lt;button id=&quot;div_height&quot;&gt;See height&lt;\/button&gt;&lt;br \/&gt;&lt;br \/&gt;\n    &lt;button id=&quot;set_width&quot;&gt;Set weight to 50px&lt;\/button&gt;\n    &lt;button id=&quot;set_height&quot;&gt;Set height to 50px&lt;\/button&gt;&lt;br \/&gt;&lt;br \/&gt;\n    &lt;button id=&quot;reset&quot;&gt;Reset size&lt;\/button&gt;\n<\/pre>\n<\/p>\n<p>\u8fd9\u91cc\u662fCSS\u4ee3\u7801<\/p>\n<p><pre lang=\"css\">\n#playstyles {\n    width: 200px\n    height: 200px\n    background-color: #eeeeee\n    border: 3px solid #dd97a1\n}\n<\/pre>\n<\/p>\n<p>\n<script type=\"text\/javascript\">\nvar seeBgColor = function(bgColor) { \n    alert(bgColor);\n}<\/p>\n<p>var seeBorderColor = function(borderColor) {\n    alert(borderColor);\n}<\/p>\n<p>var seeDivWidth = function(playDiv) {\n    var currentDivWidth = playDiv.getStyle('width');\n    alert(currentDivWidth);\n}<\/p>\n<p>var seeDivHeight = function(playDiv) {\n    var currentDivHeight = playDiv.getStyle('height');\n    alert(currentDivHeight);\n}<\/p>\n<p>var setDivWidth = function(playDiv) {\n    playDiv.setStyle('width', '50px'); \n}<\/p>\n<p>var setDivHeight = function(playDiv) {\n    playDiv.setStyle('height', '50px');\n}<\/p>\n<p>var resetSIze = function(foo) {\n    foo.setStyles({\n        'height': 200,\n        'width': 200\n    });\n}<\/p>\n<p>window.addEvent('domready', function() {\n    var playDiv = $('t_m_playstyles');\n    var bodyStyles = playDiv.getStyles('background-color', 'border-bottom-color'); \n    var bgColor = bodyStyles['background-color']; <\/p>\n<p>    $('t_m_bgcolor').addEvent('click', function(){\n        seeBgColor(bgColor);\n    });<\/p>\n<p>    $('t_m_border_color').addEvent('click', function(){\n        seeBorderColor(bodyStyles['border-bottom-color']);\n    });<\/p>\n<p>    $('t_m_div_width').addEvent('click', function(){\n        seeDivWidth(playDiv);\n    });<\/p>\n<p>    $('t_m_div_height').addEvent('click', function(){\n        seeDivHeight(playDiv);\n    });<\/p>\n<p>    $('t_m_set_width').addEvent('click', function(){\n        setDivWidth(playDiv);\n    });<\/p>\n<p>    $('t_m_set_height').addEvent('click', function(){\n        setDivHeight(playDiv);\n    }); <\/p>\n<p>    $('t_m_reset').addEvent('click', function(){\n        resetSIze(playDiv);\n    });\n});\n<\/script><\/p>\n<style type=\"text\/css\">\n#t_m_playstyles {\n    width: 200px;\n    height: 200px;\n    background:none;\n    background-color: #eeeeee;\n    border: 3px solid #dd97a1;\n}\n<\/style>\n<div id=\"t_m_playstyles\">\u00a0<\/div>\n<p>\n    <button id=\"t_m_bgcolor\">\u67e5\u770bbackground-color<\/button><br \/>\n    <button id=\"t_m_border_color\">\u67e5\u770bborder-bottom-color<\/button><\/p>\n<p>    <button id=\"t_m_div_width\">\u67e5\u770bwidth<\/button><br \/>\n    <button id=\"t_m_div_height\">\u67e5\u770bheight<\/button><\/p>\n<p>    <button id=\"t_m_set_width\">\u8bbe\u7f6ewidth\u4e3a50px<\/button><br \/>\n    <button id=\"t_m_set_height\">\u8bbe\u7f6eheight\u4e3a50px<\/button><\/p>\n<p>    <button id=\"t_m_reset\">\u6062\u590d\u5927\u5c0f<\/button>\n<\/p>\n<h3>\u66f4\u591a\u5b66\u4e60&#8230;<\/h3>\n<p><b><a href=\"http:\/\/www.consideropen.com\/downloads\/30days_of_moo\/mootorial_day7_styles.zip\" target=\"_blank\" title=\"\u4e0b\u8f7d\u4e00\u4e2a\u5305\u542b\u4f60\u5f00\u59cb\u6240\u9700\u8981\u7684\u6240\u7528\u4e1c\u897f\u7684zip\u5305\">\u4e0b\u8f7d\u4e00\u4e2a\u5305\u542b\u4f60\u5f00\u59cb\u6240\u9700\u8981\u7684\u6240\u7528\u4e1c\u897f\u7684zip\u5305<\/a><\/b><\/p>\n<p>\u5305\u542bMooTools 1.2\u6838\u5fc3\u5e93\uff0c\u4e00\u4e2a\u5916\u90e8JavaScript\u6587\u4ef6\uff0c\u4e00\u4e2a\u7b80\u5355\u7684HTML\u9875\u9762\u548c\u4e00\u4e2aCSS\u6587\u4ef6\u3002<\/p>\n<p><b>\u66f4\u591a\u5173\u4e8e\u6837\u5f0f\u8868\u7684\u5185\u5bb9<\/b><\/p>\n<p>\u8981\u5b66\u4e60\u66f4\u591a\u5173\u4e8e\u6837\u5f0f\u8868\u7684\u5185\u5bb9\uff0c\u8bf7\u67e5\u9605MooTools\u6587\u6863\u4e2d\u7684<a href=\"http:\/\/docs.mootools.net\/Element\/Element.Style\" target=\"_blank\" title=\"Element.Style\">Element.Style<\/a>\u90e8\u5206\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u539f\u6587\u5730\u5740\uff1a30 Days of Mootools 1.2 Tutorials &#8211; Day 7 &#8211; Set and Get Style Properties \u8bbe\u7f6e\u548c\u83b7\u53d6\u6837\u5f0f\u8868\u5c5e\u6027 \u8bf7\u5c0a\u91cd\u4e2a\u4eba\u52b3\u52a8\uff0c\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\uff1ahttp:\/\/fdream.net\uff0c\u8bd1\u8005\uff1aFdream \u5982\u679c\u4f60\u8fd8\u6ca1\u6709\u51c6\u5907\u597d\u5f00\u59cb\u8fd9\u4e00\u8bb2\uff0c\u8bf7\u53c2\u8003\u8fd9\u4e00\u7cfb\u5217\u7684\u6559\u7a0b\uff0c\u8fd9\u91cc\u662f\u300aMooTools 1.2\u7cfb\u5217\u6559\u7a0b\u76ee\u5f55\u300b\u3002 \u6b22\u8fce\u5f00\u59cb\u8fd9\u4e00\u7cfb\u5217\u7684\u6559\u7a0b\u7684\u7b2c\u4e03\u8bb2\u3002\u4eca\u5929\uff0c\u6211\u4eec\u6765\u770b\u4e00\u4e0b\u5982\u4f55\u901a\u8fc7MooTools 1.2\u548c\u6211\u4eec\u4ee5\u524d\u51e0\u8bb2\u4e2d\u7684\u5185\u5bb9\u6765\u64cd\u4f5c\u6837\u5f0f\uff0c\u8fd9\u5c06\u7ed9\u4f60\u5728UI\u4e0a\u5e26\u6765\u5f88\u5927\u7684\u63a7\u5236\u6743\u3002\u5904\u7406\u6837\u5f0f\u975e\u5e38\u7b80\u5355\uff0c\u4e0d\u8fc7\u4eca\u5929\u6211\u4eec\u8981\u505a\u4e00\u4e9b\u8c03\u6574\u3002\u4f8b\u5982\uff0c\u6211\u4eec\u8981\u4ecb\u7ecd\u952e\u503c\u5bf9\uff08key-value pair\uff09\u5bf9\u8c61\u3002\u6211\u4eec\u4e5f\u4f1a\u8bb2\u5230\u5728domready\u4e4b\u5916\u6765\u4f20\u9012\u53d8\u91cf\uff0c\u5c31\u50cf\u6211\u4eec\u5728\u5173\u4e8e\u51fd\u6570\u7684\u90a3\u4e00\u8bb2\u4e2d\u5b66\u5230\u7684\u4e00\u6837\u3002\u4ece\u8fd9\u91cc\u5f00\u59cb\uff0c\u6211\u4eec\u4f1a\u5f00\u59cb\u6162\u6162\u63d0\u9ad8\u96be\u5ea6\uff0c\u4ecb\u7ecd\u4e00\u4e9b\u5fc5\u8981\u7684\u7f16\u7a0b\u6982\u5ff5\u3002\u5982\u679c\u4f60\u662fJavaScript\u65b0\u624b\u6216\u8005\u7b2c\u4e00\u6b21\u5f00\u59cb\u5b66MooTools\uff0c\u8bf7\u786e\u4fdd\u4f60\u5728\u660e\u767d\u4e86\u524d\u9762\u7684\u6559\u7a0b\uff0c\u4f60\u53ef\u4ee5\u968f\u610f\u5730\u95ee\u6211\u4efb\u4f55\u95ee\u9898\u3002 \u57fa\u672c\u65b9\u6cd5 .setStyle(); \u8fd9\u4e2a\u51fd\u6570\u53ef\u4ee5\u5141\u8bb8\u4f60\u8bbe\u7f6e\u4e00\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u5c5e\u6027\u3002\u6211\u4eec\u5728\u524d\u9762\u7684\u4e00\u4e9b\u4f8b\u5b50\u4e2d\u5df2\u7ecf\u4f7f\u7528\u8fc7\u4e86\u3002\u4f60\u8981\u505a\u7684\u5c31\u662f\u628a\u5b83\u653e\u5728\u4f60\u7684 \u9009\u62e9\u5668\u4e4b\u540e\uff0c\u90a3\u4e48\u5b83\u5c06\u6539\u53d8\u4e00\u4e2a\u5143\u7d20\u6216\u8005\u591a\u4e2a\u5143\u7d20\u7684\u6837\u5f0f\u5c5e\u6027\u3002 \/\/ \u5b9a\u4e49\u4f60\u7684\u9009\u62e9\u5668 \/\/ \u6dfb\u52a0.setStyle\u65b9\u6cd5 \/\/ \u6307\u5b9a\u6837\u5f0f\u5c5e\u6027\u548c\u503c $(&#8216;body_wrap&#8217;).setStyle(&#8216;background-color&#8217;, &#8216;#eeeeee&#8217;); $$(&#8216;.class_name&#8217;).setStyle(&#8216;background-color&#8217;, &#8216;#eeeeee&#8217;); &lt;div id=&quot;body_wrap&quot;&gt; &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt; &lt;div class=&quot;class_name&quot;&gt;&lt;\/div&gt; &lt;\/div&gt; .getStyle(); \u540c\u6837\uff0c\u8fd9\u4e2a\u65b9\u6cd5\u5c31\u50cf\u5b83\u7684\u5b57\u9762\u610f\u601d\u4e00\u6837\u3002.getStyle();\u5c06\u8fd4\u56de\u4e00\u4e2a\u5143\u7d20\u7684\u4e00\u4e2a\u5c5e\u6027\u503c\u3002 \/\/ \u9996\u5148\uff0c\u5efa\u7acb\u4e00\u4e2a\u53d8\u91cf\u6765\u4fdd\u5b58\u8fd9\u4e2a\u6837\u5f0f\u5c5e\u6027\u503c var styleValue = $(&#8216;body_wrap&#8217;).getStyle(&#8216;background-color&#8217;); &hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[120,104,328,123],"class_list":["post-607","post","type-post","status-publish","format-standard","hentry","category-coding","tag-AJAX","tag-JavaScript","tag-mootools","tag-123"],"views":9453,"_links":{"self":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/posts\/607","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/comments?post=607"}],"version-history":[{"count":0,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/posts\/607\/revisions"}],"wp:attachment":[{"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/media?parent=607"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/categories?post=607"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fdream.net\/blog\/wp-json\/wp\/v2\/tags?post=607"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}