{"id":134,"date":"2023-08-25T17:22:22","date_gmt":"2023-08-25T17:22:22","guid":{"rendered":"\/\/api.jquery.com\/?p=134"},"modified":"2026-03-10T20:44:15","modified_gmt":"2026-03-10T20:44:15","slug":"css","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/css\/","title":{"rendered":".css()"},"content":{"rendered":"Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.<div class=\"toc\">\n<h4><span>Contents:<\/span><\/h4>\n<ul class=\"toc-list\">\n<li>\n<a href=\"#css1\">.css( propertyName )<\/a><ul>\n<li><a href=\"#css-propertyName\">.css( propertyName )<\/a><\/li>\n<li><a href=\"#css-propertyNames\">.css( propertyNames )<\/a><\/li>\n<\/ul>\n<\/li>\n<li>\n<a href=\"#css2\">.css( propertyName, value )<\/a><ul>\n<li><a href=\"#css-propertyName-value\">.css( propertyName, value )<\/a><\/li>\n<li><a href=\"#css-propertyName-function\">.css( propertyName, function )<\/a><\/li>\n<li><a href=\"#css-properties\">.css( properties )<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><article id=\"css1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.css( propertyName )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Get the computed style properties for the first element in the set of matched elements.<\/p>\n<ul class=\"signatures\">\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"css-propertyName\" href=\"#css-propertyName\"><span class=\"icon-link\"><\/span>.css( propertyName )<\/a>\n<\/h4>\n<ul><li id=\"css-propertyName-propertyName\">\n<div><strong>propertyName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A CSS property.<\/div>\n<\/li><\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.9\/\">1.9<\/a><\/span><a id=\"css-propertyNames\" href=\"#css-propertyNames\"><span class=\"icon-link\"><\/span>.css( propertyNames )<\/a>\n<\/h4>\n<ul><li id=\"css-propertyNames-propertyNames\">\n<div><strong>propertyNames<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Array\">Array<\/a>\n<\/div>\n<div>An array of one or more CSS properties.<\/div>\n<\/li><\/ul>\n<\/li>\n<\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n      <p>The <code>.css()<\/code> method is a convenient way to get a computed style property from the first matched element, especially in light of the different ways browsers access most of those properties (the <code>getComputedStyle()<\/code> method in standards-based browsers versus the <code>currentStyle<\/code> and <code>runtimeStyle<\/code> properties in Internet Explorer prior to version 9) and the different terms browsers use for certain properties. For example, Internet Explorer's DOM implementation refers to the <code>float<\/code> property as <code>styleFloat<\/code>, while W3C standards-compliant browsers refer to it as <code>cssFloat<\/code>. For consistency, you can simply use <code>\"float\"<\/code>, and jQuery will translate it to the correct value for each browser.<\/p>\n      <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css( \"background-color\" )<\/code> and <code>.css( \"backgroundColor\" )<\/code>. This means mixed case has a special meaning, <code>.css( \"WiDtH\" )<\/code> won't do the same as <code>.css( \"width\" )<\/code>, for example.<\/p>\n      <p>Note that the <em>computed style<\/em> of an element may not be the same as the value specified for that element in a style sheet. For example, computed styles of dimensions are almost always pixels, but they can be specified as em, ex, px or % in a style sheet. Different browsers may return CSS color values that are logically but not textually equal, e.g., #FFF, #ffffff, and rgb(255,255,255).<\/p>\n      <p>Retrieval of shorthand CSS properties (e.g., <code>margin<\/code>, <code>background<\/code>, <code>border<\/code>), although functional with some browsers, is not guaranteed. For example, if you want to retrieve the rendered <code>border-width<\/code>, use: <code>$( elem ).css( \"borderTopWidth\" )<\/code>, <code>$( elem ).css( \"borderBottomWidth\" )<\/code>, and so on.<\/p>\n      <p>An element should be connected to the DOM when calling <code>.css()<\/code> on it. If it isn't, jQuery may throw an error.<\/p>\n      <p><strong>As of jQuery 1.9<\/strong>, passing an array of style properties to <code>.css()<\/code> will result in an object of property-value pairs. For example, to retrieve all four rendered <code>border-width<\/code> values, you could use <code>$( elem ).css([ \"borderTopWidth\", \"borderRightWidth\", \"borderBottomWidth\", \"borderLeftWidth\" ])<\/code>. <\/p>\n      <p><strong>As of jQuery 3.2<\/strong>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\">CSS Custom Properties<\/a> (also called CSS Variables) are supported: <code>$( \"p\" ).css( \"--custom-property\" )<\/code>. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.<\/p>\n    <\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Examples:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<h3>\n\t\t\t\tExample 1<\/h3>\n<p>Get the background color of a clicked div.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">div<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">60px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">60px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">5px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">float<\/span>: left;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">span<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"result\"<\/span>&gt;<\/span><span class=\"hljs-symbol\">&amp;nbsp;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">span<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color:blue;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color:rgb(15,99,30);\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color:#123456;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\">\"background-color:#f11;\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"div\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">var<\/span> color = $( <span class=\"hljs-built_in\">this<\/span> ).css( <span class=\"hljs-string\">\"background-color\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">\"#result\"<\/span> ).html( <span class=\"hljs-string\">\"That div is &lt;span style='color:\"<\/span> +<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    color + <span class=\"hljs-string\">\";'&gt;\"<\/span> + color + <span class=\"hljs-string\">\"&lt;\/span&gt;.\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1\">\n<h3>\n\t\t\t\tExample 2<\/h3>\n<p>Get the width, height, text color, and background color of a clicked div.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n42\">42<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n43\">43<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n44\">44<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n45\">45<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n46\">46<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n47\">47<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n48\">48<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n49\">49<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n50\">50<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n51\">51<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n52\">52<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n53\">53<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n54\">54<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n55\">55<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n56\">56<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n57\">57<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n58\">58<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n59\">59<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">div<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">50px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">margin<\/span>: <span class=\"hljs-number\">5px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">5px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">float<\/span>: left;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#box1<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">50px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: yellow;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: blue;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#box2<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">255<\/span>, <span class=\"hljs-number\">255<\/span>);<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-built_in\">rgb<\/span>(<span class=\"hljs-number\">15<\/span>, <span class=\"hljs-number\">99<\/span>, <span class=\"hljs-number\">30<\/span>);<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#box3<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">40px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#fcc<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#123456<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#box4<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">70px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f11<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"result\"<\/span>&gt;<\/span><span class=\"hljs-symbol\">&amp;nbsp;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"box1\"<\/span>&gt;<\/span>1<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"box2\"<\/span>&gt;<\/span>2<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"box3\"<\/span>&gt;<\/span>3<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"box4\"<\/span>&gt;<\/span>4<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"div\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">var<\/span> html = [ <span class=\"hljs-string\">\"The clicked div has the following styles:\"<\/span> ];<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">var<\/span> styleProps = $( <span class=\"hljs-built_in\">this<\/span> ).css([<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-string\">\"width\"<\/span>, <span class=\"hljs-string\">\"height\"<\/span>, <span class=\"hljs-string\">\"color\"<\/span>, <span class=\"hljs-string\">\"background-color\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  ]);<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $.each( styleProps, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> prop, value <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    html.push( prop + <span class=\"hljs-string\">\": \"<\/span> + value );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">\"#result\"<\/span> ).html( html.join( <span class=\"hljs-string\">\"&lt;br&gt;\"<\/span> ) );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article><article id=\"css2\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">.css( propertyName, value )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jQuery\">jQuery<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Set one or more CSS properties for the set of matched elements.<\/p>\n<ul class=\"signatures\">\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"css-propertyName-value\" href=\"#css-propertyName-value\"><span class=\"icon-link\"><\/span>.css( propertyName, value )<\/a>\n<\/h4>\n<ul>\n<li id=\"css-propertyName-value-propertyName\">\n<div><strong>propertyName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A CSS property name.<\/div>\n<\/li>\n<li id=\"css-propertyName-value-value\">\n<div><strong>value<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a>\n<\/div>\n<div>A value to set for the property.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.4\/\">1.4<\/a><\/span><a id=\"css-propertyName-function\" href=\"#css-propertyName-function\"><span class=\"icon-link\"><\/span>.css( propertyName, function )<\/a>\n<\/h4>\n<ul>\n<li id=\"css-propertyName-function-propertyName\">\n<div><strong>propertyName<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A CSS property name.<\/div>\n<\/li>\n<li id=\"css-propertyName-function-function\">\n<div><strong>function<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>( <a href=\"http:\/\/api.jquery.com\/Types\/#Integer\">Integer<\/a> index, <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> value )\n\t\t\t=&gt;\n\t\t\t<a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#Number\">Number<\/a>\n<\/div>\n<div>A function returning the value to set. <code>this<\/code> is the current element. Receives the index position of the element in the set and the old value as arguments.<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"css-properties\" href=\"#css-properties\"><span class=\"icon-link\"><\/span>.css( properties )<\/a>\n<\/h4>\n<ul><li id=\"css-properties-properties\">\n<div><strong>properties<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a>\n<\/div>\n<div>An object of property-value pairs to set.<\/div>\n<\/li><\/ul>\n<\/li>\n<\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc-1\">\n      <p>As with the <code>.prop()<\/code> method, the <code>.css()<\/code> method makes setting properties of elements quick and easy. This method can take either a property name and value as separate parameters, or a single object of key-value pairs.<\/p>\n      <p>Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both <code>.css({ \"background-color\": \"#ffe\", \"border-left\": \"5px solid #ccc\" })<\/code> and <code>.css({backgroundColor: \"#ffe\", borderLeft: \"5px solid #ccc\" })<\/code>. Notice that with the DOM notation, quotation marks around the property names are optional, but with CSS notation they're required due to the hyphen in the name.<\/p>\n      <p>In jQuery 3.x or older, when a number is passed as the value, jQuery will convert it to a string and add <code>px<\/code> to the end of that string. However, there are exceptions. <code>px<\/code> is not added to keys of <a href=\"\/jQuery.cssNumber\/\"><code>jQuery.cssNumber<\/code><\/a> If the property requires units other than <code>px<\/code>, convert the value to a string and add the appropriate units before calling the method.<\/p>\n      <p>In jQuery 4.0 or newer, when a number is passed as the value, jQuery will only convert it to a string and add <code>px<\/code> to the end of that string for a limited set of properties - mostly related to width, height, border, margin &amp; padding; the full list:<\/p>\n      <ul>\n        <li>setting the element position: <code>top<\/code>, <code>right<\/code>, <code>bottom<\/code>, <code>left<\/code>\n<\/li>\n        <li>setting the element dimensions: <code>width<\/code>, <code>height<\/code>, <code>min-width<\/code>, <code>min-height<\/code>, <code>max-width<\/code>, <code>max-height<\/code>\n<\/li>\n        <li>padding-related: <code>padding<\/code>, <code>padding-top<\/code>, <code>padding-right<\/code>, <code>padding-bottom<\/code>, <code>padding-left<\/code>\n<\/li>\n        <li>margin-related: <code>margin<\/code>, <code>margin-top<\/code>, <code>margin-right<\/code>, <code>margin-bottom<\/code>, <code>margin-left<\/code>\n<\/li>\n        <li>border-related: <code>border<\/code>, <code>border-width<\/code>, <code>border-top<\/code>, <code>border-top-width<\/code>, <code>border-right<\/code>, <code>border-right-width<\/code>, <code>border-bottom<\/code>, <code>border-bottom-width<\/code>, <code>border-left<\/code>, <code>border-left-width<\/code>\n<\/li>\n      <\/ul>\n      <p>When using <code>.css()<\/code> as a setter, jQuery modifies the element's <code>style<\/code> property. For example,  <code>$( \"#mydiv\" ).css( \"color\", \"green\" )<\/code> is equivalent to <code>document.getElementById( \"mydiv\" ).style.color = \"green\"<\/code>. Setting the value of a style property to an empty string \u2014 e.g. <code>$( \"#mydiv\" ).css( \"color\", \"\" )<\/code> \u2014 removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's <code>.css()<\/code> method, or through direct DOM manipulation of the <code>style<\/code> property. As a consequence, the element's style for that property will be restored to whatever value was applied. So, this method can be used to cancel any style modification you have previously performed. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or <code>&lt;style&gt;<\/code> element. <strong>Warning:<\/strong> one notable exception is that, for IE 8 and below, removing a shorthand property such as <code>border<\/code> or <code>background<\/code> will remove that style entirely from the element, regardless of what is set in a stylesheet or <code>&lt;style&gt;<\/code> element.<\/p>\n      <p><strong>Note:<\/strong> <code>.css()<\/code> doesn't support <code>!important<\/code> declarations. So, the statement <code>$( \"p\" ).css( \"color\", \"red !important\" )<\/code> does not turn the color of all paragraphs in the page to red as of jQuery 3.6.0. Do not depend on that <em>not working<\/em>, though, as a future version of jQuery may add support for such declarations. It's strongly advised to use classes instead; otherwise use a jQuery plugin.<\/p>\n      <p>As of jQuery 1.8, the <code>.css()<\/code> setter will automatically take care of prefixing the property name. For example, take <code>.css( \"user-select\", \"none\" )<\/code> in Chrome\/Safari will set it as <code>-webkit-user-select<\/code>, Firefox will use <code>-moz-user-select<\/code>, and IE10 will use <code>-ms-user-select<\/code>.<\/p>\n      <p>As of jQuery 1.6, <code>.css()<\/code> accepts relative values similar to <code>.animate()<\/code>. Relative values are a string starting with <code>+=<\/code> or <code>-=<\/code> to increment or decrement the current value. For example, if an element's padding-left was 10px, <code>.css( \"padding-left\", \"+=15\" )<\/code> would result in a total padding-left of 25px.<\/p>\n      <p>As of jQuery 1.4, <code>.css()<\/code> allows us to pass a function as the property value:<\/p>\n      <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"div.example\"<\/span> ).css( <span class=\"hljs-string\">\"width\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> index <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">return<\/span> index * <span class=\"hljs-number\">50<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n      <p>This example sets the widths of the matched elements to incrementally larger values.<\/p>\n      <p><strong>Note: <\/strong>If nothing is returned in the setter function (ie. <code>function( index, style ){} )<\/code>, or if <code>undefined<\/code> is returned, the current value is not changed. This is useful for selectively setting values only when certain criteria are met.<\/p>\n      <p><strong>As of jQuery 3.2<\/strong>, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/--*\">CSS Custom Properties<\/a> (also called CSS Variables) are supported: <code>$( \"p\" ).css( \"--custom-property\", \"value\" )<\/code>. Note that you need to provide the property name as-is, camelCasing it won't work as it does for regular CSS properties.<\/p>\n    <\/div>\n<section class=\"entry-examples\" id=\"entry-examples-1\"><header><h2>Examples:<\/h2><\/header><div class=\"entry-example\" id=\"example-1-0\">\n<h3>\n\t\t\t\tExample 1<\/h3>\n<p>Change the color of any paragraph to red on mouseover event.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">p<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: blue;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">200px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">font-size<\/span>: <span class=\"hljs-number\">14px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Just roll the mouse over me.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Or me to see a color change.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"p\"<\/span> ).on( <span class=\"hljs-string\">\"mouseover\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-built_in\">this<\/span> ).css( <span class=\"hljs-string\">\"color\"<\/span>, <span class=\"hljs-string\">\"red\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1-1\">\n<h3>\n\t\t\t\tExample 2<\/h3>\n<p>Increase the width of #box by 200 pixels the first time it is clicked.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-id\">#box<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background<\/span>: black;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: snow;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">10px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"box\"<\/span>&gt;<\/span>Click me to grow<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"#box\"<\/span> ).one( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-built_in\">this<\/span> ).css( <span class=\"hljs-string\">\"width\"<\/span>, <span class=\"hljs-string\">\"+=200\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1-2\">\n<h3>\n\t\t\t\tExample 3<\/h3>\n<p>Highlight a clicked word in the paragraph.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">p<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: blue;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">font-weight<\/span>: bold;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">cursor<\/span>: pointer;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  Once upon a time there was a man<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  who lived in a pizza parlor. This<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  man just loved pizza and ate it all<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  the time.  He went on to be the<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  happiest man in the world.  The end.<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> words = $( <span class=\"hljs-string\">\"p\"<\/span> ).first().text().split( <span class=\"hljs-regexp\">\/\\s+\/<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> text = words.join( <span class=\"hljs-string\">\"&lt;\/span&gt; &lt;span&gt;\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"p\"<\/span> ).first().html( <span class=\"hljs-string\">\"&lt;span&gt;\"<\/span> + text + <span class=\"hljs-string\">\"&lt;\/span&gt;\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"span\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-built_in\">this<\/span> ).css( <span class=\"hljs-string\">\"background-color\"<\/span>, <span class=\"hljs-string\">\"yellow\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1-3\">\n<h3>\n\t\t\t\tExample 4<\/h3>\n<p>Change the font weight and background color on mouseenter and mouseleave.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">p<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">color<\/span>: green;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Move the mouse over a paragraph.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>Like this one or the one above.<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"p\"<\/span> )<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"mouseenter\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-built_in\">this<\/span> ).css({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"background-color\"<\/span>: <span class=\"hljs-string\">\"yellow\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-string\">\"font-weight\"<\/span>: <span class=\"hljs-string\">\"bolder\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  })<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .on( <span class=\"hljs-string\">\"mouseleave\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> styles = {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">backgroundColor<\/span> : <span class=\"hljs-string\">\"#ddd\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-attr\">fontWeight<\/span>: <span class=\"hljs-string\">\"\"<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    };<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-built_in\">this<\/span> ).css( styles );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div>\n<div class=\"entry-example\" id=\"example-1-4\">\n<h3>\n\t\t\t\tExample 5<\/h3>\n<p>Increase the size of a div when you click it.<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>css demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-selector-tag\">div<\/span> {<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">20px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">15px<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attribute\">background-color<\/span>: <span class=\"hljs-number\">#f33<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>click<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>click<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"div\"<\/span> ).on( <span class=\"hljs-string\">\"click\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-built_in\">this<\/span> ).css({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">width<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> index, value <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-built_in\">parseFloat<\/span>( value ) * <span class=\"hljs-number\">1.2<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    },<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-attr\">height<\/span>: <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> index, value <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>      <span class=\"hljs-keyword\">return<\/span> <span class=\"hljs-built_in\">parseFloat<\/span>( value ) * <span class=\"hljs-number\">1.2<\/span>;<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    }<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Get the value of a computed style property for the first element in the set of matched elements or set one or more CSS properties for every matched element.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,51,78,88,98,104,111],"tags":[],"class_list":["post-134","post","type-post","status-publish","format-standard","hentry","category-css","category-style-properties","category-78","category-88","category-98","category-104","category-111"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/134","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=134"}],"version-history":[{"count":7,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/134\/revisions"}],"predecessor-version":[{"id":1677,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/134\/revisions\/1677"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=134"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=134"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=134"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}