diff options
Diffstat (limited to 'files/zh-tw/web/api/css_object_model')
4 files changed, 468 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/zh-tw/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..589300d041 --- /dev/null +++ b/files/zh-tw/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,33 @@ +--- +title: Determining the dimensions of elements +slug: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +--- +<p>{{APIRef("CSSOM View")}}</p> + +<p>There are several properties you can look at in order to determine the width and height of elements, and it can be tricky to determine which is the right one for your needs. This article is designed to help you make that decision. Note that all these properties are read-only. If you want to set the width and height of an element, use <span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" style="line-height: 1.5;" title="The width CSS property specifies the width of the content area of an element. The content area is inside the padding, border, and margin of the element.">width</a> </code>and<code style="font-style: normal; line-height: 1.5;"> </code><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/height" title="The height CSS property specifies the height of the content area of an element. The content area is inside the padding, border, and margin of the element.">height</a>;</code><span style="line-height: 1.5;"> or, the overriding</span><span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-width" style="line-height: 1.5;" title="The min-width property is used to set the minimum width of a given element. It prevents the used value of the width property from becoming smaller than the value specified for min-width."><code>min-width</code></a><span style="line-height: 1.5;"> </span>and<span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-width" style="line-height: 1.5;" title="The max-width property is used to set the maximum width of a given element. It prevents the used value of the width property from becoming larger than the value specified for max-width."><code>max-width</code></a><span style="line-height: 1.5;">, </span>and<span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/min-height" style="line-height: 1.5;" title="The min-height CSS property is used to set the minimum height of a given element. It prevents the used value of the height property from becoming smaller than the value specified for min-height."><code>min-height</code></a><span style="line-height: 1.5;"> </span>and<span style="line-height: 1.5;"> </span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/max-height" style="line-height: 1.5;" title="The max-height CSS property is used to set the maximum height of a given element. It prevents the used value of the height property from becoming larger than the value specified for max-height."><code>max-height</code></a><span style="line-height: 1.5;"> properties.</span></p> + +<h2 id="How_much_room_does_it_use_up.3F" name="How_much_room_does_it_use_up.3F">How much room does it use up?</h2> + +<p>If you need to know the total amount of space an element occupies, including the width of the visible content, scrollbars (if any), padding, and border, you want to use the <code><a href="/en/DOM/element.offsetWidth" title="en/DOM/element.offsetWidth">offsetWidth</a></code> and <code><a href="/en/DOM/element.offsetHeight" title="en/DOM/element.offsetHeight">offsetHeight</a></code> properties. Most of the time these are the same as width and height of <code><a href="/en/DOM/element.getBoundingClientRect" title="en/DOM/element.getBoundingClientRect">getBoundingClientRect()</a></code>, when there aren't any transforms applied to the element. In case of transforms, the <code>offsetWidth</code> and <code>offsetHeight</code> returns the element's layout width and height, while <code>getBoundingClientRect()</code> returns the rendering width and height. As an example, if the element has <code>width: 100px;</code> and <code>transform: scale(0.5);</code> the <code>getBoundingClientRect()</code> will return 50 as the width, while <code>offsetWidth</code> will return 100.</p> + +<p><img alt="Image:Dimensions-offset.png" class="internal" src="/@api/deki/files/186/=Dimensions-offset.png"></p> + +<h2 id="What.27s_the_size_of_the_displayed_content.3F" name="What.27s_the_size_of_the_displayed_content.3F">What's the size of the displayed content?</h2> + +<p>If you need to know how much space the actual displayed content takes up, including padding but not including the border, margins, or scrollbars, you want to use the <code><a href="/en/DOM/element.clientWidth" title="en/DOM/element.clientWidth">clientWidth</a></code> and <code><a href="/en/DOM/element.clientHeight" title="en/DOM/element.clientHeight">clientHeight</a></code> properties:</p> + +<p><img alt="Image:Dimensions-client.png" class="internal" src="/@api/deki/files/185/=Dimensions-client.png"></p> + +<h2 id="How_big_is_the_content.3F" name="How_big_is_the_content.3F">How big is the content?</h2> + +<p>If you need to know the actual size of the content, regardless of how much of it is currently visible, you need to use the <code><a href="/en/DOM/element.scrollWidth" title="en/DOM/element.scrollWidth">scrollWidth</a></code> and <code><a href="/en-US/docs/Web/API/Element.scrollHeight" title="en/DOM/element.scrollHeight">scrollHeight</a></code> properties. These return the width and height of the entire content of an element, even if only part of it is presently visible due to the use of scroll bars.</p> + +<p>For example, if a 600x400 pixel element is being displayed inside a 300x300 pixel scrollbox, <code>scrollWidth</code> will return 600 while <code>scrollHeight</code> will return 400.</p> + +<h2 id="參見">參見</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/cssom-view/">http://www.w3.org/TR/cssom-view/</a></li> + <li><a href="https://docs.microsoft.com/en-us/previous-versions//hh781509(v=vs.85)">MSDN: Measuring Element Dimension and Location</a></li> +</ul> diff --git a/files/zh-tw/web/api/css_object_model/index.html b/files/zh-tw/web/api/css_object_model/index.html new file mode 100644 index 0000000000..e924a96301 --- /dev/null +++ b/files/zh-tw/web/api/css_object_model/index.html @@ -0,0 +1,131 @@ +--- +title: CSS Object Model +slug: Web/API/CSS_Object_Model +tags: + - API + - CSSOM + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/CSS_Object_Model +--- +<p>{{DefaultAPISidebar('CSSOM')}}</p> + +<p>The <strong>CSS Object Model</strong> is a set of APIs allowing to manipulate CSS from JavaScript. It is the pendant of DOM and HTML APIs, but for CSS. It allows to read and modify CSS style dynamically.</p> + +<h2 id="Reference">Reference</h2> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("CaretPosition")}}</li> + <li>{{domxref("CSS")}}</li> + <li>{{domxref("CSSCharsetRule")}}</li> + <li>{{domxref("CSSConditionRule")}}</li> + <li>{{domxref("CSSCounterStyleRule")}}</li> + <li>{{domxref("CSSFontFaceRule")}}</li> + <li>{{domxref("CSSFontFeatureValuesMap")}}</li> + <li>{{domxref("CSSFontFeatureValuesRule")}}</li> + <li>{{domxref("CSSGroupingRule")}}</li> + <li>{{domxref("CSSImportRule")}}</li> + <li>{{domxref("CSSKeyframeRule")}}</li> + <li>{{domxref("CSSKeyframesRule")}}</li> + <li>{{domxref("CSSMarginRule")}}</li> + <li>{{domxref("CSSMediaRule")}}</li> + <li>{{domxref("CSSNamespaceRule")}}</li> + <li>{{domxref("CSSPageRule")}}</li> + <li>{{domxref("CSSRule")}}</li> + <li>{{domxref("CSSRuleList")}}</li> + <li>{{domxref("CSSStyleSheet")}}</li> + <li>{{domxref("CSSStyleDeclaration")}}</li> + <li>{{domxref("CSSSupportsRule")}}</li> + <li>{{domxref("CSSVariablesMap")}}</li> + <li>{{domxref("CSSViewportRule")}}</li> + <li>{{domxref("ElementCSSInlineStyle")}}</li> + <li>{{domxref("GeometryUtils")}}</li> + <li>{{domxref("GetStyleUtils")}}</li> + <li>{{domxref("LinkStyle")}}</li> + <li>{{domxref("MediaList")}}</li> + <li>{{domxref("MediaQueryList")}}</li> + <li>{{domxref("PseudoElement")}}</li> + <li>{{domxref("Screen")}}</li> + <li>{{domxref("StyleSheet")}}</li> + <li>{{domxref("StyleSheetList")}}</li> + <li>{{domxref("TransitionEvent")}}</li> +</ul> +</div> + +<p>Several other interfaces are also extended by the CSSOM-related specifications: {{domxref("Document")}}, {{domxref("Window")}}, {{domxref("Element")}}, {{domxref("HTMLElement")}}, {{domxref("HTMLImageElement")}}, {{domxref("Range")}}, {{domxref("MouseEvent")}}, and {{domxref("SVGElement")}}.</p> + +<h2 id="Tutorials">Tutorials</h2> + +<ul> + <li><a href="/en-US/docs/Determining_the_dimensions_of_elements">Determining the dimensions of elements</a> (it needs some updating as it was made in the DHTML/Ajax era).</li> + <li><a href="/en-US/docs/WebAPI/Managing_screen_orientation">Managing screen orientation</a></li> +</ul> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("CSSOM")}}</td> + <td>{{Spec2("CSSOM")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSSOM View")}}</td> + <td>{{Spec2("CSSOM View")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("Screen Orientation")}}</td> + <td>{{Spec2("Screen Orientation")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Fonts")}}</td> + <td>{{Spec2("CSS3 Fonts")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Animations")}}</td> + <td>{{Spec2("CSS3 Animations")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Transitions")}}</td> + <td>{{Spec2("CSS3 Transitions")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Variables")}}</td> + <td>{{Spec2("CSS3 Variables")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Conditional")}}</td> + <td>{{Spec2("CSS3 Conditional")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Device")}}</td> + <td>{{Spec2("CSS3 Device")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("CSS3 Counter Styles")}}</td> + <td>{{Spec2("CSS3 Counter Styles")}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility_notes">Browser compatibility notes</h2> + +<p>All these features have been added little by little over the years to the different browsers: it was a quite complex process that can't be summarized in a simple table. Please refer to the specific interfaces for its availability.</p> diff --git a/files/zh-tw/web/api/css_object_model/managing_screen_orientation/index.html b/files/zh-tw/web/api/css_object_model/managing_screen_orientation/index.html new file mode 100644 index 0000000000..806ac2d047 --- /dev/null +++ b/files/zh-tw/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,172 @@ +--- +title: 控制畫面方向 +slug: Web/API/CSS_Object_Model/Managing_screen_orientation +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +<p>{{SeeCompatTable}}{{APIRef}}</p> + +<h2 id="摘要">摘要</h2> + +<p>畫面方向（Screen Orientation）與<a href="https://developer.mozilla.org/zh-TW/docs/WebAPI/Detecting_device_orientation" title="/zh-TW/docs/WebAPI/Detecting_device_orientation">裝置方向（Device Orientation）</a>略有不同。有時甚至裝置本身不具備方向偵測功能，但裝置的螢幕仍搭載方向功能。如果裝置可測知本身的方向又能控制畫面方向，就能隨時配合 Web Apps 而達到最佳效果。</p> + +<p>現有 2 種方法可處理畫面的方向，但均需搭配 CSS 與 JavaScript。第一種方法就是方向的 <a href="https://developer.mozilla.org/zh-TW/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">Media Query</a>。根據瀏覽器視窗為橫放（寬度大於高度）或直放（高度大於寬度）狀態，而透過 CSS 調整網頁內容的配置。</p> + +<p>第二種方法就是 JavaScript Screen Orientation API，可取得畫面目前的方向並進一步鎖定。</p> + +<h2 id="根據方向而調整配置">根據方向而調整配置</h2> + +<p>方向改變最常見的情形之一，就是根據裝置的方向而修正內容的配置方式。舉例來說，你可能想將按鈕列拉到與裝置螢幕等長。而透過 Media Query 即可輕鬆達到此效果。</p> + +<p>來看看下列 HTML 程式碼範例：</p> + +<pre class="brush: html"><ul id="toolbar"> + <li>A</li> + <li>B</li> + <li>C</li> +</ul> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p> +</pre> + +<p>CSS 將根據方向的 Media Query，處理畫面方向的特殊樣式：</p> + +<pre class="brush: css">/* First let's define some common styles */ + +html, body { + width : 100%; + height: 100%; +} + +body { + border: 1px solid black; + + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +p { + font : 1em sans-serif; + margin : 0; + padding: .5em; +} + +ul { + list-style: none; + + font : 1em monospace; + margin : 0; + padding: .5em; + + -moz-box-sizing: border-box; + box-sizing: border-box; + + background: black; +} + +li { + display: inline-block; + margin : 0; + padding: 0.5em; + background: white; +} +</pre> + +<p>在設定某些通用的樣式之後，即可針對方向定義特殊條件：</p> + +<pre class="brush: css">/* For portrait, we want the tool bar on top */ + +@media screen and (orientation: portrait) { + #toolbar { + width: 100%; + } +} + +/* For landscape, we want the tool bar stick on the left */ + +@media screen and (orientation: landscape) { + #toolbar { + position: fixed; + width: 2.65em; + height: 100%; + } + + p { + margin-left: 2em; + } + + li + li { + margin-top: .5em; + } +} +</pre> + +<p>結果如下所示（若無法顯示，可至本文右上角切換回英文原文觀看）：</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Portrait</th> + <th scope="col">Landscape</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}</td> + <td>{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>注意：</strong>方向 Media Query 其實是以瀏覽器視窗 (或 iframe) 的方向為準，而非裝置本身的方向。</p> +</div> + +<h2 id="鎖定畫面方向">鎖定畫面方向</h2> + +<div class="warning"> +<p><strong>警告：</strong>此 API 仍屬實驗性質，目前仍具備 <code>moz</code> 前綴而僅能用於 <a href="https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_OS" title="/zh-TW/docs/Mozilla/Firefox_OS">Firefox OS</a> 與 <a href="https://developer.mozilla.org/zh-TW/docs/Mozilla/Firefox_for_Android" title="/zh-TW/docs/Mozilla/Firefox_for_Android">Firefox for Android</a>，而 Windows 8.1 以上版本的 Internet Explorer 則使用 <code>ms</code> 前綴。</p> +</div> + +<p>某些裝置（主要為行動裝置）可根據本身方向而動態改變畫面的方向，讓使用者隨時閱讀畫面上的資訊。這種動作對文字類的內容影響不大，但某些內容就無法順利套用此功能。舉例來說，若遊戲需要裝置方向的相關資訊，就可能因為方向變化而發生混亂情形。</p> + +<p>而 Screen Orientation API 即可用以避免或處理這類變化。</p> + +<h3 id="監聽方向變化">監聽方向變化</h3> + +<p>只要裝置改變了畫面方向與本身方向，就會觸發 {{event("orientationchange")}} 事件，再由 {{domxref("Screen.orientation")}} 屬性讀取之。</p> + +<pre class="brush: js">screen.addEventListener("orientationchange", function () { + console.log("The orientation of the screen is: " + screen.orientation); +}); +</pre> + +<h3 id="避免方向改變">避免方向改變</h3> + +<p>任何 Web Apps 均可鎖定畫面以符合本身需求。{{domxref("Screen.lockOrientation()")}} 函式可鎖定畫面方向；{{domxref("Screen.unlockOrientation()")}} 函式可解鎖畫面方向。</p> + +<p>{{domxref("Screen.lockOrientation()")}} 將接受一組字串或系列字串，以定義畫面鎖定的方向。有效字串為：「<code>portrait-primary</code>」、「<code>portrait-secondary</code>」、「<code>landscape-primary</code>」、「<code>landscape-secondary</code>」、「<code>portrait</code>」、「<code>landscape</code>」。另可參閱 {{domxref("Screen.lockOrientation")}} 進一步了解這些有效值。</p> + +<pre class="brush: js">screen.lockOrientation('landscape');</pre> + +<div class="note"> +<p><strong>注意：</strong>畫面鎖定功能將依 Web Apps 而有所不同。如果 App A 鎖定為 <code>landscape</code>；App B 鎖定為 <code>portrait，則此兩款 Apps 均將維持自己的方向。所以不論如何切換</code> A 與 B，均不會觸發 {{event("orientationchange")}} 事件。</p> + +<p>但若必須改變方向以滿足畫面鎖定的需求，則鎖定方向時就會觸發 {{event("orientationchange")}} 事件。</p> +</div> + +<h2 id="Firefox_OS_and_Android_Orientation_lock_using_the_manifest">Firefox OS and Android: Orientation lock using the manifest</h2> + +<p>For a Firefox OS and Firefox Android (soon to work on Firefox desktop too) specific way to lock orientation, you can set the <a href="/en-US/Apps/Build/Manifest#orientation">orientation</a> field in app's your manifest file, for example:</p> + +<pre class="brush: json">"orientation": "portrait"</pre> + +<h2 id="參見">參見</h2> + +<ul> + <li>{{domxref("Screen.orientation")}}</li> + <li>{{domxref("Screen.lockOrientation()")}}</li> + <li>{{domxref("Screen.unlockOrientation()")}}</li> + <li>{{domxref("Screen.onorientationchange")}}</li> + <li><a href="/zh-TW/docs/CSS/Media_queries#orientation" title="en-US/CSS/Media queries#orientation">方向的 Media Query</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/media-queries/" title="http://hacks.mozilla.org/2009/06/media-queries/">Firefox 3.5 的 Media Queries 簡介</a></li> +</ul> diff --git a/files/zh-tw/web/api/css_object_model/using_dynamic_styling_information/index.html b/files/zh-tw/web/api/css_object_model/using_dynamic_styling_information/index.html new file mode 100644 index 0000000000..fa020403aa --- /dev/null +++ b/files/zh-tw/web/api/css_object_model/using_dynamic_styling_information/index.html @@ -0,0 +1,132 @@ +--- +title: 使用動態樣式資訊 +slug: Web/API/CSS_Object_Model/Using_dynamic_styling_information +translation_of: Web/API/CSS_Object_Model/Using_dynamic_styling_information +--- +<p>The CSS Object Model (CSSOM), part of the DOM, exposes specific interfaces allowing manipulation of a wide amount of information regarding CSS. Initially defined in the <em>DOM Level 2 Style</em> recommendation, these interfaces forms now a specification, <em>CSS Object Model (CSSOM)</em> which aims at superseding it.</p> + +<p>In many cases, and where possible, it really is best practice to dynamically manipulate classes via the {{ domxref("element.className", "className") }} property since the ultimate appearance of all of the styling hooks can be controlled in a single stylesheet. One's JavaScript code also becomes cleaner since instead of being dedicated to styling details, it can focus on the overall semantics of each section it is creating or manipulating, leaving the precise style details to the stylesheet. However, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or individual elements), and that is described in further detail below. Note also that, as with individual element's DOM styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but merely the internal representation of the document.</p> + +<p>The basic <code>style</code> object exposes the {{domxref("Stylesheet")}} and the {{domxref("CSSStylesheet")}} interfaces. Those interfaces contain members like <code>insertRule</code>, <code>selectorText</code>, and <code>parentStyleSheet</code> for accessing and manipulating the individual style rules that make up a CSS stylesheet.</p> + +<p>To get to the <code>style</code> objects from the <code>document</code>, you can use the {{domxref("document.styleSheets")}} property and access the individual objects by index (e.g., <code>document.styleSheets[0]</code> is the first stylesheet defined for the document, etc.).</p> + +<h2 id="Modify_a_stylesheet_rule" name="Modify_a_stylesheet_rule">透過 CSSOM 修改樣式表規則</h2> + +<pre class="brush: html" style="font-size: 14px;"><html> +<head> +<title>Modifying a stylesheet rule with CSSOM</title> +<style type="text/css"> +body { + background-color: red; +} +</style> +<script type="text/javascript"> +var stylesheet = document.styleSheets[1]; +stylesheet.cssRules[0].style.backgroundColor="blue"; +</script> +</head> +<body> +The stylesheet declaration for the body's background color is modified via JavaScript. +</body> +</html></pre> + +<p>{{ EmbedLiveSample('Modify_a_stylesheet_rule') }}</p> + +<p>The list of properties available in the DOM from the style property is given on the <a href="/en-US/docs/DOM/CSS" title="en/DOM/CSS">DOM CSS Properties List</a> page.</p> + +<p>To modify styles to a document using CSS syntax, one can insert rules or insert {{HTMLElement("style")}} tags whose <code>innerHTML</code> property is set to the desired CSS.</p> + +<h2 id="Modify_an_element_style" name="Modify_an_element_style">修改元素的樣式</h2> + +<p>The element {{domxref("HTMLElement.style", "style")}} property (see also the section "DOM Style Object" below) can also be used to get and set the styles on an element. However, this property only returns style attributes that have been set <em>in-line</em> (e.g, <code><td style="background-color: lightblue"></code> returns the string "<code>background-color:lightblue</code>", or directly for that element using <code>element.style.propertyName</code>, even though there may be other styles on the element from a stylesheet).</p> + +<p>Also, when you set this property on an element, you override and erase any styles that have been set elsewhere for that element's particular property you are setting. Setting the border property, for example, will override settings made elsewhere for that element's border property in the head section, or external style sheets. However, this will not affect any other property declarations for that element's styles, such as padding or margin or font, for example.</p> + +<p>To change a particular element's style, you can adapt the following example for the element(s) you want to style.</p> + +<pre class="brush: html"><html> +<head> +<title>simple style example</title> + +<script type="text/javascript"> + +function alterStyle(elem) { + elem.style.background = 'green'; +} + +function resetStyle(elemId) { + elem = document.getElementById(elemId); + elem.style.background = 'white'; +} +</script> + +<style type="text/css"> +#p1 { + border: solid blue 2px; +} +</style> +</head> + +<body> + +<!-- passes a reference to the element's object as parameter 'this'. --> +<p id="p1" onclick="alterStyle(this);"> + Click here to change background color. +</p> + +<!-- passes the 'p1' id of another element's style to modify. --> +<button onclick="resetStyle('p1');">Reset background color</button> + +</body> +</html> +</pre> + +<p>{{ EmbedLiveSample('Modify_an_element_style') }}</p> + +<p>The {{domxref("window.getComputedStyle", "getComputedStyle()")}} method on the <code>document.defaultView</code> object returns all styles that have actually been computed for an element. See <a href="/en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle" title="en/Gecko_DOM_Reference/Examples#Example_6:_getComputedStyle">Example 6: getComputedStyle</a> in the examples chapter for more information on how to use this method.</p> + +<h2 id="DOM_Style_Object" name="DOM_Style_Object">DOM Style Object</h2> + +<p>The <code>style</code> object represents an individual style statement. Unlike the individual rules available from the <code><a href="/en/DOM/document.styleSheets" title="en/DOM/document.styleSheets">document.styleSheets</a></code> collection, the style object is accessed from the <code>document</code> or from the elements to which that style is applied. It represents the <em>in-line</em> styles on a particular element.</p> + +<p>More important than the two properties noted here is the use of the <code>style</code> object to set individual style properties on an element:</p> + +<div id="DOM_Style_Object_code_sample"> +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>style Property Example</title> + <link rel="StyleSheet" href="example.css" type="text/css"> + <script type="text/javascript"> + function stilo() { + document.getElementById('d').style.color = 'orange'; + } + function resetStyle() { + document.getElementById('d').style.color = 'black'; + } + </script> + </head> + + <body> + <div id="d" class="thunder">Thunder</div> + <button onclick="stilo()">Click here to change text color</button> + <button onclick="resetStyle()">Reset text color</button> + </body> +</html> +</pre> +</div> + +<p>{{ EmbedLiveSample('DOM_Style_Object_code_sample') }}</p> + +<p>The <strong>media</strong> and <strong>type</strong> of the style may or may not be given.</p> + +<h3 id="DOM_Style_Object_SetAttribue" name="DOM_Style_Object_SetAttribue">使用 setAttribute 方法</h3> + +<p>Note that you can also change style of an element by getting a reference to it and then use its <code><a href="/en/DOM/element.setAttribute" title="en/DOM/element.setAttribute">setAttribute</a></code> method to specify the CSS property and its value.</p> + +<pre class="brush: js">var el = document.getElementById('some-element'); +el.setAttribute('style', 'background-color:darkblue;'); +</pre> + +<p>Be aware, however, that <code>setAttribute</code> removes all other style properties that may already have been defined in the element's style object. If the <code><var>some-element</var></code> element above had an in–line style attribute of say <code>style="font-size: 18px"</code>, that value would be removed by the use of <code>setAttribute</code>.</p> |