Relative length units in CSS are used to specify a length relative to another length property. Let use see some key units in CSS with the description − Sr.No Unit & Description 1 emRelative to the font-size of the element i.e 4em means 4 times the size of the current font. 2 exRelative to the x-height of the current font 3 chRelative to width of the 0 4 remRelative to font-size of the root element 5 vwRelative to 1% of the width of the viewport* 6 ... Read More

To set column rules, you can use the shorthand column-rule property, which allows you to set the following properties − column-rule-width: set the width of the rule between columns column-rule-style: set the style of the rule between columns column-rule-color: set the rule of the rule between columns The value for column rules can be set as − column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; column-rule: column-rule-width column-rule-style column-rule-color|initial|inherit; Also, the properties can be used separately. We will see both the examples. Column-rule shorthand property In this example, we have set the column-rule using the shorthand property − column-rule: ... Read More

Background position is to set the beginning position of a background image. For this, use the background-position property.ExampleLet us now see an example − Live Demo body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: left center; } .demo {    text-decoration: overline underline; } Details Examination Center near ABC College. Exam begins at 9AM. OutputExampleLet us now see another example − Live Demo body {    background-image: url("https://www.tutorialspoint.com/images/Swift.png");    background-repeat: no-repeat;    background-attachment: fixed;    color: blue;    background-position: 50% 50%; } Details Examination Center near ABC College. Exam begins at 9AM. Output

The get() method in jQuery is used to get the DOM elements matched by the selector.SyntaxThe syntax is as follows −$(selector).get(index)Above, the index specifies which of the matching elements to get.Let us now see an example to implement the jQuery get() method −Example Live Demo    $(document).ready(function(){       $("button").click(function(){          var res = $("li").get(2);          $("span").text(res.innerHTML);       });    }); Devices TV Laptop Headphone Earphone SSD 3rd li element OutputThis will produce the following output −Now, click on the button −ExampleLet ... Read More

The each() method in jQuery is used to execute a function for each matched element.SyntaxThe syntax is as follows −$(selector).each(function(index, ele))Above, the index is the position of the selector, whereas ele is the current element.Let us now see an example to implement the jQuery each() method −Example Live Demo    $(document).ready(function(){       $("button").click(function(){          $("li").each(function(){             alert($(this).text())          });       });    }); Devices TV Laptop Headphone Earphone SSD Get each element OutputThis will produce the ... Read More

The length property in jQuery is used to get the number of elements in the jQuery object.SyntaxThe syntax is as follows −$(selector).lengthExampleLet us now see an example to implement the jQuery length property − Live Demo    $(document).ready(function(){       $("button").click(function(){          document.getElementById("demo").innerHTML = "Count = " + $("li").length       });    }); Devices TV Laptop Headphone Earphone SSD Count of li OutputThis will produce the following output −Click “Count of li” to get the number of li elements −

To traverse and find ancestors of an element, jQuery has the following methods: parent(), parents() and parentsUntil()−parent() methodThe parent() method in jQuery is used to return the direct parent element of the selected element. Let us see an example −Example Live Demo div {    width:600px; } .demo * {    display: block;    border: 2px solid yellow;    color: blue;    padding: 10px;    margin: 10px; }    $(document).ready(function(){       $("span").parent().css({"color": "blue", "border": "3px dashed blue"});    }); great-great-grandparent great-grandparent grandparent parent span OutputThis will produce ... Read More

The toArray() method in jQuery is used to get all the DOM elements contained in the jQuery set, as an arraySyntaxThe syntax is as follows −$(selector).toArray()Let us now see an example to implement the jQuery toArray() method −Example Live Demo    $(document).ready(function(){       $("button").click(function(){          var arr = $("p").toArray()          for (var k = 0; i< arr.length; k++) {             alert(arr[k].innerHTML);          }       });    }); Devices This is demo text 1. This is demo text ... Read More

The is() method in jQuery is used to check whether one of the selected elements matches the value in parameter selectorEle.SyntaxThe syntax is as follows −$(selector).is(selectorElement, func(index, element))Above, selectorEle is a selector expression, element or jQuery object to match with the current set of the element. The func parameter is used to specify a function to run for the group of selected elements.ExampleLet us now see an example to implement the jQuery is() method − Live Demo div {    width:600px; } .demo * {    display: block;    border: 2px solid yellow;    color: blue;    padding: ... Read More

The removeProp() method in jQuery is used to remove a property set by the prop() method.SyntaxThe syntax is as follows −$(selector).removeProp(property)Above, the parameter property is the name of the property to remove.ExampleLet us now see an example to implement the jQuery removeProp() method − Live Demo    $(document).ready(function(){       $("button").click(function(){          var $val = $("div");          $val.prop("font-size", "1.6em");          $val.append("Property value = " + $val.prop("font-size"));          $val.removeProp("font-size");          $val.append("Property removed successfully...");       });    }); Adding ... Read More