From 6eef03c589119523c1b65c1407709a34ba4c6ec7 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Thu, 28 Dec 2017 22:38:33 +0000 Subject: [PATCH] Travis build: 461 --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++ docs/index.html | 16 +++++++++++++++ snippets/getStyle.md | 2 +- snippets/setStyle.md | 4 ++-- 4 files changed, 67 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 8f552d0cb..bd837dc1d 100644 --- a/README.md +++ b/README.md @@ -90,12 +90,14 @@ * [`detectDeviceType`](#detectdevicetype) * [`elementIsVisibleInViewport`](#elementisvisibleinviewport) * [`getScrollPosition`](#getscrollposition) +* [`getStyle`](#getstyle) * [`getURLParameters`](#geturlparameters) * [`hasClass`](#hasclass) * [`hide`](#hide) * [`httpsRedirect`](#httpsredirect) * [`redirect`](#redirect) * [`scrollToTop`](#scrolltotop) +* [`setStyle`](#setstyle) * [`show`](#show) * [`toggleClass`](#toggleclass) @@ -1739,6 +1741,29 @@ getScrollPosition(); // {x: 0, y: 200} [⬆ Back to top](#table-of-contents) +### getStyle + +Returns the value of a CSS rule for the specified element. + +Use `Window.getComputedStyle()` to get the value of the CSS rule for the specified element. + +```js +const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]; +``` + +
+Examples + +```js +getStyle(document.querySelector('p'), 'font-size'); // '16px' +``` + +
+ + +[⬆ Back to top](#table-of-contents) + + ### getURLParameters Returns an object containing the parameters of the current URL. @@ -1888,6 +1913,29 @@ scrollToTop(); [⬆ Back to top](#table-of-contents) +### setStyle + +Sets the value of a CSS rule for the specified element. + +Use `element.style` to set the value of the CSS rule for the specified element to `value`. + +```js +const setStyle = (el, ruleName, value) => (el.style[ruleName] = value); +``` + +
+Examples + +```js +setStyle(document.querySelector('p'), 'font-size', '20px'); // The first

element on the page will have a font-size of 20px +``` + +

+ + +[⬆ Back to top](#table-of-contents) + + ### show Shows all the elements specified. diff --git a/docs/index.html b/docs/index.html index 4a72bb5c8..ffe40d5df 100644 --- a/docs/index.html +++ b/docs/index.html @@ -159,12 +159,14 @@ detectDeviceType elementIsVisibleInViewport getScrollPosition +getStyle getURLParameters hasClass hide httpsRedirect redirect scrollToTop +setStyle show toggleClass @@ -852,6 +854,13 @@ You can omit el to use a default value of window.

getScrollPosition(); // {x: 0, y: 200}
+

getStyle

+

Returns the value of a CSS rule for the specified element.

+

Use Window.getComputedStyle() to get the value of the CSS rule for the specified element.

+
const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
+
+
getStyle(document.querySelector('p'), 'font-size'); // '16px'
+

getURLParameters

Returns an object containing the parameters of the current URL.

Use match() with an appropriate regular expression to get all key-value pairs, Array.reduce() to map and combine them into a single object. @@ -907,6 +916,13 @@ Scroll by a fraction of the distance from the top. Use window.requestAnima 

scrollToTop();
+

setStyle

+

Sets the value of a CSS rule for the specified element.

+

Use element.style to set the value of the CSS rule for the specified element to value.

+
const setStyle = (el, ruleName, value) => (el.style[ruleName] = value);
+
+
setStyle(document.querySelector('p'), 'font-size', '20px'); // The first <p> element on the page will have a font-size of 20px
+

show

Shows all the elements specified.

Use the spread operator (...) and Array.forEach() to clear the display property for each element specified.

diff --git a/snippets/getStyle.md b/snippets/getStyle.md index 40b744a2b..ee9456a69 100644 --- a/snippets/getStyle.md +++ b/snippets/getStyle.md @@ -9,5 +9,5 @@ const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName]; ``` ```js -getStyle(document.querySelector('p'), 'font-size') // '16px' +getStyle(document.querySelector('p'), 'font-size'); // '16px' ``` diff --git a/snippets/setStyle.md b/snippets/setStyle.md index 7ac9460af..ef70e78ad 100644 --- a/snippets/setStyle.md +++ b/snippets/setStyle.md @@ -5,9 +5,9 @@ Sets the value of a CSS rule for the specified element. Use `element.style` to set the value of the CSS rule for the specified element to `value`. ```js -const setStyle = (el, ruleName, value) => el.style[ruleName] = value; +const setStyle = (el, ruleName, value) => (el.style[ruleName] = value); ``` ```js -setStyle(document.querySelector('p'), 'font-size', '20px') // The first

element on the page will have a font-size of 20px +setStyle(document.querySelector('p'), 'font-size', '20px'); // The first

element on the page will have a font-size of 20px ```