diff options
Diffstat (limited to 'files/pl/web/api/htmlelement')
| -rw-r--r-- | files/pl/web/api/htmlelement/click/index.html | 24 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/dataset/index.html | 134 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/dir/index.html | 35 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/lang/index.html | 41 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/offsetheight/index.html | 62 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/offsetleft/index.html | 74 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/offsetparent/index.html | 29 | ||||
| -rw-r--r-- | files/pl/web/api/htmlelement/offsetwidth/index.html | 71 |
8 files changed, 336 insertions, 134 deletions
diff --git a/files/pl/web/api/htmlelement/click/index.html b/files/pl/web/api/htmlelement/click/index.html new file mode 100644 index 0000000000..0a728115e5 --- /dev/null +++ b/files/pl/web/api/htmlelement/click/index.html @@ -0,0 +1,24 @@ +--- +title: element.click +slug: Web/API/HTMLElement/click +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/click +original_slug: Web/API/Element/click +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Metoda <code>click</code> wywołuje kliknięcie na bieżącym elemencie.</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval">element.click() +</pre> +<h3 id="Notatki" name="Notatki">Notatki</h3> +<p>Metoda <code>click</code> symuluje zdarzenie kliknięcia na bieżącym elemencie. Zwykle używa się tego by wywołać obsługę zdarzenia przypisaną do elementu bieżącego bądź leżącego wyżej w "łańcuchu zdarzeń".</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/2000/WD-DOM-Level-2-HTML-20001113/html.html#ID-2651361">click</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.click", "fr": "fr/DOM/element.click" } ) }}</p> diff --git a/files/pl/web/api/htmlelement/dataset/index.html b/files/pl/web/api/htmlelement/dataset/index.html deleted file mode 100644 index fac7ec119f..0000000000 --- a/files/pl/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -<div>{{ APIRef("HTML DOM") }}</div> - -<p><span class="seoSummary">Właściwość <code><strong>dataset</strong></code> interfejsu {{domxref("HTMLElement")}} pozwala na odczyt/zapis <a href="/en/HTML/Global_attributes#attr-data-*" title="https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*">niestandardowcyh atrybutów</a> (<code>data-*</code>) elementu.</span> Dostęp ten jest możliwy w HTMLu jak i w DOMie. It is a <a href="/en/DOM/DOMStringMap" title="en/DOM/DOMStringMap">map of DOMString</a>, one entry for each custom data attribute. Zauważ że właściwość<strong> </strong><code>dataset</code><strong> </strong>można odczytać, ale nie zmieniać bezpośrednio. Zamiast tego, wszystkie zapisy muszą być wykonywane na pojedynczych polach <code>dataset</code>, które odpowiadają atrybutom danych. Note also that an HTML <code><strong>data-</strong></code><em>attribute</em> and its corresponding DOM<strong> </strong><code>dataset.</code><em>property</em> do not share the same name, but they are always similar:</p> - -<ul> - <li>The name of a custom data attribute in HTML begins with <code>data-</code>. It must contain only letters, numbers and the following characters: dash (<code>-</code>), dot (<code>.</code>), colon (<code>:</code>), underscore (<code>_</code>) -- but NOT any ASCII capital letters (<code>A</code> to <code>Z</code>).</li> - <li>The name of a custom data attribute in JavaScript is the name of the same HTML attribute but in camelCase and with no dashes, dots, etc.</li> -</ul> - -<p>In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article <a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Using data attributes.</a></p> - -<h3 id="Zmiana_nazw">Zmiana nazw</h3> - -<p>dash-style to camelCase: A custom data attribute name is transformed to a key for the {{ domxref("DOMStringMap") }} entry with the following rules</p> - -<ul> - <li>the prefix <code>data-</code> is removed (including the dash);</li> - <li>for any dash (<code>U+002D</code>) followed by an<span style="line-height: 1.5;"> ASCII lowercase letter </span><code>a</code><span style="line-height: 1.5;"> to </span><code>z</code><span style="line-height: 1.5;">, the dash is removed and the letter is transformed into its uppercase counterpart;</span></li> - <li>other characters (including other dashes) are left unchanged.</li> -</ul> - -<p>camelCase to dash-style: The opposite transformation, that maps a key to an attribute name, uses the following rules:</p> - -<ul> - <li>Restriction: A dash must not be immediately followed by an ASCII lowercase letter <code>a</code> to <code>z</code> (before the transformation);</li> - <li>a prefix <code>data-</code> is added;</li> - <li>any ASCII uppercase letter <code>A</code> to <code>Z</code> is transformed into a dash followed by its lowercase counterpart;</li> - <li>other characters are left unchanged.</li> -</ul> - -<p>The restriction in the rules above ensures that the two transformations are the inverse one of the other.</p> - -<p>For example, the attribute named <code>data-abc-def</code> corresponds to the key <code>abcDef</code>.</p> - -<ul> -</ul> - -<h3 id="Dostęp_do_wartości">Dostęp do wartości</h3> - -<ul> - <li>Attributes can be set and read by using the camelCase name (the key) like an object property of the dataset, as in <em>element.</em>dataset.<em>keyname</em></li> - <li>Attributes can also be set and read using the object-properties bracket-syntax, as in <em>element.</em>dataset[<em>keyname</em>]</li> - <li>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/in">in operator</a> can be used to check whether a given atttribute exists.</li> -</ul> - - - -<h3 id="Ustawianie_wartości">Ustawianie wartości</h3> - -<ul> - <li>Podawana podczas ustawiania atrybutu wartość jest zawsze zapisywana jako łańcuch znaków, np. <code>null</code> jest zapisywane jako "null".</li> - <li>Usunięcie atrybutu jest możliwe przy pomocy <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">operatora delete</a>.</li> -</ul> - -<h2 id="Składnia">Składnia</h2> - -<ul> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>.<em>camelCasedName</em>;</li> - <li><em>element.</em><strong>dataset</strong>.<em>camelCasedName</em> = <em>string</em>;</li> - <br> - <li><em>string</em> = <em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>];</li> - <li><em>element</em>.<strong>dataset</strong>[<em>camelCasedName</em>] = <em>string</em>;</li> - <br> - <li><em>Custom data attributes can also be set directly on HTML elements, but attribute names must use the data- syntax above. </em></li> -</ul> - -<h2 id="Przykłady">Przykłady</h2> - -<pre class="brush: html"><div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div></pre> - -<pre class="brush: js">const el = document.querySelector('#user'); - -// el.id == 'user' -// el.dataset.id === '1234567890' -// el.dataset.user === 'johndoe' -// el.dataset.dateOfBirth === '' - -// set the data attribute -el.dataset.dateOfBirth = '1960-10-03'; -// Result: el.dataset.dateOfBirth === 1960-10-03 - -delete el.dataset.dateOfBirth; -// Result: el.dataset.dateOfBirth === undefined - -// 'someDataAttr' in el.dataset === false -el.dataset.someDataAttr = 'mydata'; -// Result: 'someDataAttr' in el.dataset === true -</pre> - -<h2 id="Specyfikacje">Specyfikacje</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specyfikacja</th> - <th scope="col">Status</th> - <th scope="col">Komentarz</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from latest snapshot, {{SpecName('HTML5.1')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of {{SpecName('HTML WHATWG')}}, initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.HTMLElement.dataset")}}</p> - -<h2 id="Zobacz_także">Zobacz także</h2> - -<ul> - <li>The HTML <code><a href="/en-US/docs/Web/HTML/Global_attributes/data-*"><strong>data-*</strong></a></code> class of global attributes.</li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Używanie atrybutów danych</a></li> - <li>{{domxref("Element.getAttribute()")}} and {{domxref("Element.setAttribute()")}}</li> -</ul> diff --git a/files/pl/web/api/htmlelement/dir/index.html b/files/pl/web/api/htmlelement/dir/index.html new file mode 100644 index 0000000000..6d96feb8a0 --- /dev/null +++ b/files/pl/web/api/htmlelement/dir/index.html @@ -0,0 +1,35 @@ +--- +title: element.dir +slug: Web/API/HTMLElement/dir +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/dir +original_slug: Web/API/Element/dir +--- +<div> + {{ApiRef}}</div> +<h2 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h2> +<p>Atrybut <strong>dir</strong> ustawia lub pobiera kierunek pisania tekstu dla zawartości bieżącego elementu.</p> +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> +<pre class="syntaxbox">var <var>bieżącyKierunekPisania</var> = elementNodeReference.dir; +elementNodeReference.dir = <var>nowyKierunekPisania</var>; +</pre> +<p><var>bieżącyKierunekPisania</var> jest łańcuchem reprezentującym kierunek pisania tekstu bieżącego elementu. <var>nowyKierunekPisania</var> to zmienna łańcuchowa, której wartość reprezentuje kierunek pisania tekstu.</p> +<p>Możliwe wartości <strong>dir</strong> to <code>ltr</code> dla "od lewej do prawej" i <code>rtl</code> dla "od prawej do lewej".</p> +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> +<pre class="brush:js">var parg = document.getElementById("para1"); + +parg.dir = "rtl"; +// zmienia kierunek tekstu w paragrafie "para1" +</pre> +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> +<p>Kierunek pisania tekstu elementu oznacza kierunek, w którym idzie tekst (do obsługi różnych języków). Języki arabski i hebrajski to typowe przykłady użycia kierunku <em>rtl</em>.</p> +<p>Obrazek może mieć atrybut <em>dir</em> ustawiony na <em>rtl</em>. W takim wypadku atrybuty <em>title</em> i <em>alt</em> będą sformatowane i wyświetlona jako <em>rtl</em>.</p> +<p>Jeśli tabela ma kierunek <em>rtl</em>, kolumny porządkowane są od prawej do lewej.</p> +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52460740">W3C DOM Level 2 HTML: dir</a></li> +</ul> diff --git a/files/pl/web/api/htmlelement/lang/index.html b/files/pl/web/api/htmlelement/lang/index.html new file mode 100644 index 0000000000..699d6f41ae --- /dev/null +++ b/files/pl/web/api/htmlelement/lang/index.html @@ -0,0 +1,41 @@ +--- +title: element.lang +slug: Web/API/HTMLElement/lang +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/lang +original_slug: Web/API/Element/lang +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p>Własność ta pozwala pobrać lub ustawić język bazowy wartości atrybutów i treści elementu.</p> +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> +<pre class="eval">var <var>languageUsed</var> = elementNodeReference.lang; +elementNodeReference.lang = <var>NewLanguage</var>; +</pre> +<ul> + <li><var>languageUsed</var> to zmienna (ciąg znaków) do której przypisany zostanie aktualny język elementu.</li> + <li><var>NewLanguage</var> to zmienna której wartość będzie użyta jako nowy język elementu.</li> +</ul> +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> +<pre>// poniższy fragment kodu porównuje język bazowy i odsyła +// do innych URL na podstawie odczytanego kodu języka +if (document.documentElement.lang == "en") + { + window.location.href = "Some_document.html.en"; + } +else if(document.documentElement.lang == "ru") + { + window.location.href = "Some_document.html.ru"; + }; +</pre> +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> +<p>Kod języka zwracany przez w/w właściwość zgodny jest z kodami zdefiniowanymi w dokumencie <a class="external" href="http://tools.ietf.org/html/rfc1766" title="http://tools.ietf.org/html/rfc1766">RFC 1766</a>. Przykładowo: "en" dla języka angielskiego, "ja" dla japońskiego, "es" dla hiszpańskiego itd. Domyślna wartość atrybutu to <code>unknown</code>. Wartość tego atrybutu ustawiana jest zwykle dla podstawowego (najwyższego) elementu dokumentu.</p> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59132807">W3C DOM Level 2 HTML: lang</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.lang", "fr": "fr/DOM/element.lang", "ja": "ja/DOM/element.lang" } ) }}</p> diff --git a/files/pl/web/api/htmlelement/offsetheight/index.html b/files/pl/web/api/htmlelement/offsetheight/index.html new file mode 100644 index 0000000000..1fe35e7691 --- /dev/null +++ b/files/pl/web/api/htmlelement/offsetheight/index.html @@ -0,0 +1,62 @@ +--- +title: element.offsetHeight +slug: Web/API/HTMLElement/offsetHeight +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetHeight +original_slug: Web/API/Element/offsetHeight +--- +<p>{{ ApiRef() }}</p> + +<h3 id="offsetHeight" name="offsetHeight">offsetHeight</h3> + +<p>Własność DHTML (Dynamic HyperText Markup Language), która daje wysokość relatywnego elementu do układu strony.</p> + +<h2 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h2> + +<pre class="eval">var<em>intElemOffsetHeight</em> = document.getElementById(<em>id_attribute_value</em>).offsetHeight; +</pre> + +<p><em>intElemOffsetHeight</em>is a variable storing an integer corresponding to the offsetHeight pixel value of the element. offsetHeight is a read-only property.</p> + +<h2 id="Opis" name="Opis">Opis</h2> + +<p>Typically, an element's <strong>offsetHeight</strong> is a measurement which includes the element borders, the element vertical padding, the element horizontal scrollbar (if present, if rendered) and the element CSS height.</p> + +<h2 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h2> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="grafika:offsetHeight.png"></p> + +<h2 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h2> + +<p>offsetHeight is part of the MSIE's DHTML object model. offsetHeight is not part of any W3C specification or technical recommendation.</p> + +<h2 id="Uwagi" name="Uwagi">Uwagi</h2> + +<p>offsetHeight is a property of the DHTML object model which was first introduced by MSIE. It is sometimes referred as an element physical/graphical dimensions or an element's box height.</p> + +<h2 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h2> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetheight.asp?frame=true">MSDN's Definicja offsetHeight</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> + <li><a class="external" href="http://www.mozilla.org/docs/dom/domref/dom_el_ref18.html">Gecko DOM Reference on offsetHeight</a></li> +</ul> diff --git a/files/pl/web/api/htmlelement/offsetleft/index.html b/files/pl/web/api/htmlelement/offsetleft/index.html new file mode 100644 index 0000000000..2cc478daa5 --- /dev/null +++ b/files/pl/web/api/htmlelement/offsetleft/index.html @@ -0,0 +1,74 @@ +--- +title: element.offsetLeft +slug: Web/API/HTMLElement/offsetLeft +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetLeft +original_slug: Web/API/Element/offsetLeft +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> + +<p>Zwraca ilość pikseli, jaką dzieli<em>górny lewy róg</em> bieżącego elementu od lewej strony wewnątrz węzła <code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>.</p> + +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> + +<pre class="eval"><em>left</em> =<em>element</em>.offsetLeft; +</pre> + +<p><code>left</code> jest liczbą całkowitą reprezentująca przesunięcie od lewej strony podane w pikselach.</p> + +<h3 id="Uwaga" name="Uwaga">Uwaga</h3> + +<p><code>offsetLeft</code> returns the position the upper left edge of the element; not necessarily the 'real' left edge of the element. This is important for inline elements (such as <strong>span</strong>) in flowed text that wraps from one line to the next. The span may start in the middle of the line and wrap around to the beginning of the next line. The <code>offsetLeft</code> will refer to the left edge of the start of the span, not the left edge of text at the start of the second line. Therefore, a box with the left, top, width and height of <code>offsetLeft, offsetTop, offsetWidth</code> and <code>offsetHeight</code> will not be a bounding box for a span with wrapped text. (And, I can't figure out how to find the leftmost edge of such a span, sigh.)</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<pre>var colorTable = document.getElementById("t1"); +var tOLeft = colorTable.offsetLeft; + +if (tOLeft > 5) { + // duże lewe przesunięcie: zrób coś tutaj +} +</pre> + +<h3 id="Przyk.C5.82ad_2" name="Przyk.C5.82ad_2">Przykład</h3> + +<p>Per the note above, this example shows a 'long' sentence that wraps within a div with a blue border, and a red box that one might think should describe the boundaries of the span.</p> + +<p><img alt="Image:offsetLeft.jpg"></p> + +<p><small><font color="gray">Note: This is an image of the example, not a live rendering in the browser. This was done because script elements can't be included in the wiki page.</font></small></p> + +<pre><div style="width: 300px; border-color:blue; + border-style:solid; border-width:1;"> + <span>Short span. </span> + <span id="long">Long span that wraps withing this div.</span> +</div> + +<div id="box" style="position: absolute; border-color: red; + border-width: 1; border-style: solid; z-index: 10"> +</div> + +<script> + var box = document.getElementById("box"); + var long = document.getElementById("long"); + box.style.left = long.offsetLeft + document.body.scrollLeft; + box.style.top = long.offsetTop + document.body.scrollTop; + box.style.width = long.offsetWidth; + box.style.height = long.offsetHeight; +</script> +</pre> + +<h3 id="Zobacz_tak.C5.BCe" name="Zobacz_tak.C5.BCe">Zobacz także</h3> + +<p><code><a href="pl/DOM/element.offsetParent">offsetParent</a></code>, <code><a href="pl/DOM/element.offsetTop">offsetTop</a></code>, <code><a href="pl/DOM/element.offsetWidth">offsetWidth</a></code>, <code><a href="pl/DOM/element.offsetHeight">offsetHeight</a></code></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p>Niestandardowa własność.</p> diff --git a/files/pl/web/api/htmlelement/offsetparent/index.html b/files/pl/web/api/htmlelement/offsetparent/index.html new file mode 100644 index 0000000000..57033d33a5 --- /dev/null +++ b/files/pl/web/api/htmlelement/offsetparent/index.html @@ -0,0 +1,29 @@ +--- +title: element.offsetParent +slug: Web/API/HTMLElement/offsetParent +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetParent +original_slug: Web/API/Element/offsetParent +--- +<p>{{ ApiRef() }}</p> +<h3 id="Podsumowanie" name="Podsumowanie">Podsumowanie</h3> +<p><b>offsetParent</b> zwraca referencję do obiektu, który jest najbliższym (w hierarchii zawierania się elementów) pozycjonowanym elementem. Jeżeli element nie jest pozycjonowany, <b>offsetParent</b> jest wówczas korzeń dokumentu (html w trybie zgodności ze standardami; body w trybie przybliżonym).</p> +<h3 id="Sk.C5.82adnia" name="Sk.C5.82adnia">Składnia</h3> +<pre class="eval"><i>parentObj</i> = element.offsetParent +</pre> +<h3 id="Parametry" name="Parametry">Parametry</h3> +<ul> + <li><code>parentObj</code> jest referencją do obiektu, względem którego przesunięty jest bieżący element.</li> +</ul> +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> +<p>DOM Level 0. + <i> + Nie jest częścią specyfikacji.</i> +</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/element.offsetParent", "fr": "fr/DOM/element.offsetParent" } ) }}</p> diff --git a/files/pl/web/api/htmlelement/offsetwidth/index.html b/files/pl/web/api/htmlelement/offsetwidth/index.html new file mode 100644 index 0000000000..996593db32 --- /dev/null +++ b/files/pl/web/api/htmlelement/offsetwidth/index.html @@ -0,0 +1,71 @@ +--- +title: element.offsetWidth +slug: Web/API/HTMLElement/offsetWidth +tags: + - DOM + - Dokumentacja_Gecko_DOM + - Gecko + - Strony_wymagające_dopracowania + - Wszystkie_kategorie +translation_of: Web/API/HTMLElement/offsetWidth +original_slug: Web/API/Element/offsetWidth +--- +<p>{{ APIRef("HTML DOM") }}</p> + +<h3 id="offsetWidth" name="offsetWidth">offsetWidth</h3> + +<p>właściwość <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>, która podaje szerokość elementu, odnosząca się do układu strony.</p> + +<h3 id="Sk.C5.82adnia_i_warto.C5.9Bci" name="Sk.C5.82adnia_i_warto.C5.9Bci">Składnia i wartości</h3> + +<pre class="eval">var <em>intElemOffsetWidth</em> = document.getElementById(<em>id_attribute_value</em>).offsetWidth; +</pre> + +<p><code>intElemOffsetWidth</code> jest zmienną przechowującą liczbę całkowitą odpowiadającą wartości <strong><code>offsetWidth</code></strong> elementu i wyrażoną w pikselach. <strong><code>offsetWidth</code></strong> jest właściwością tylko do odczytu.</p> + +<h3 id="Opis" name="Opis">Opis</h3> + +<p>Zazwyczaj <strong><code>offsetWidth</code></strong> elementu obejmuje jego obramowanie, wewnętrzny margines (padding), pionowy pasek przewijania (jeśli jest obecny lub renderowany) i szerokość CSS elementu.</p> + +<h3 id="Przyk.C5.82ad" name="Przyk.C5.82ad">Przykład</h3> + +<div id="offsetContainer" style="margin: 26px 0px; background-color: rgb(255, 255, 204); border: 4px dashed black; color: black; position: absolute; left: 260px;"> +<div id="idDiv" style="margin: 24px 29px; border: 24px black solid; padding: 0px 28px; width: 199px; height: 102px; overflow: auto; background-color: white; font-size: 13px!important; font-family: Arial, sans-serif;"> +<p id="PaddingTopLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-top</p> + +<p>Gentle, individualistic and very loyal, Birman cats fall between Siamese and Persian in character. If you admire cats that are non aggressive, that enjoy being with humans and tend to be on the quiet side, you may well find that Birman cats are just the felines for you.</p> + +<p><span style="float: right;"><img alt="Image:BirmanCat.jpg" class="internal" src="/@api/deki/files/2210/=BirmanCat.jpg"></span>All Birmans have colorpointed features, dark coloration of the face, ears, legs and tail.</p> + +<p>Cat image and text coming from <a class="external" href="http://www.best-cat-art.com/">www.best-cat-art.com</a></p> + +<p id="PaddingBottomLabel" style="text-align: center; font-style: italic; font-weight: bold; font-size: 13px!important; font-family: Arial, sans-serif; margin: 0px;">padding-bottom</p> +</div> +<strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: -32px; position: absolute; top: 85px;">Left</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 170px; position: absolute; top: -24px;">Top</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 370px; position: absolute; top: 85px;">Right</strong><strong style="color: blue; font-family: Arial,sans-serif; font-size: 13px!important; font-weight: bold; left: 164px; position: absolute; top: 203px;">Bottom</strong><em>margin-top</em><em>margin-bottom</em><em>border-top</em><em>border-bottom</em><span class="comment">{{ mediawiki.external('if IE') }}><span id="MrgLeft" style="position: absolute; left: 8px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-left</span><span id="BrdLeft" style="position: absolute; left: 33px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-left</span><span id="PdgLeft" style="position: absolute; left: 55px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">padding-left</span><span id="PdgRight" style="position: absolute; left: 275px; top: 60px; color: black; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl; white-space: nowrap;">padding-right</span><span id="BrdRight" style="position: absolute; left: 310px; top: 65px; color: white; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">border-right</span><span id="MrgRight" style="position: absolute; left: 340px; top: 65px; font: bold 13px Arial, sans-serif !important; writing-mode: tb-rl;">margin-right</span><!{{ mediawiki.external('endif') }}</span></div> + +<p style="margin-top: 270px;"><img alt="Image:offsetWidth.png" class="internal" src="/@api/deki/files/2468/=OffsetWidth.png"></p> + +<h3 id="Specyfikacja" name="Specyfikacja">Specyfikacja</h3> + +<p><span id="result_box" lang="pl"><strong><code>offsetWidth</code></strong> jest częścią modelu obiektowego MSIE <abbr title="Dynamic HyperText Markup Language">DHTML</abbr>. <strong><code>offsetWidth</code></strong> nie jest częścią żadnej specyfikacji W3C ani rekomendacji technicznej.</span></p> + +<h3 id="Uwagi" name="Uwagi">Uwagi</h3> + +<p><strong><code>offsetWidth</code></strong> jest własnością modelu obiektowego <span id="result_box" lang="pl"><abbr title="Dynamic HyperText Markup Language">DHTML</abbr></span>, który został wprowadzony przez MSIE. Czasem określany jest jako fizyczny/graficzny wymiar elementu lub jako szerokość pudełka elementu.</p> + +<h3 id="Dokumentacja" name="Dokumentacja">Dokumentacja</h3> + +<ul> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/offsetwidth.asp?frame=true">MSDN's offsetWidth definition</a></li> + <li><a class="external" href="http://msdn.microsoft.com/workshop/author/om/measuring.asp">MSDN's Measuring Element Dimension and Location</a></li> +</ul> + +<div class="noinclude"> +<h3 id="Dokumentacja" name="Dokumentacja">Zobacz również</h3> +</div> + +<ul> + <li><a href="/fr/DOM/element.offsetHeight" title="element.offsetHeight">element.offsetHeight</a></li> + <li><a href="/pl/DOM/element.clientWidth" title="element.clientWidth">element.clientWidth</a></li> + <li><a href="/cn/DOM/element.clientHeight" title="element.clientHeight">element.clientHeight</a></li> +</ul> |