jaquery css code example

Example 1: jquery add style

//revising Ankur's answer
//Syntax:
$(selector).css({property-name:property-value});

//Example:
$('.bodytext').css({'color':'red'});

Example 2: jquery css

$('#element').css('display', 'block'); /* Single style */
$('#element').css({'display': 'block', 'background-color' : '#2ECC40'}); /* Multiple style */

Example 3: how to css in jquery

$(init);
    
function init() {
    $("h1").css("backgroundColor", "yellow");
    $("#myParagraph").css({ "backgroundColor": "black", "color": "white" });
    $(".bordered").css("border", "1px solid black");
}

Example 4: jquery css

--------------------------------------------------------------
Method:
	const element = $("#element")
	function update_change_css(field, val)
	{
		element.css(field, val)
	}



Usage:
	const element = $("#element")
	function update_change_css(field, val)
	{
		element.css(field, val)
	}

	update_change_css("display", "block")
	update_change_css("background-color", "red")
	update_change_css("width", "100%")
	update_change_css("color", "aqua")
--------------------------------------------------------------
OR
--------------------------------------------------------------
Method:
	$('#element').css("property", "property value")



Usage:
	$('#element').css("color", "red")
	$('#element').css("background-color", "blue")
	$('#element').css("font-size", "30px")
--------------------------------------------------------------
OR
--------------------------------------------------------------
Method:
	const element = $("#element")
	function update_change_css(val)
	{
		element.css("color", val)
	}



Usage:
	const element = $("#element")
	function update_change_css(val)
	{
		element.css("color", val)
	}

	update_change_css("black")
	update_change_css("red")
	update_change_css("blue")
	update_change_css("aqua")
--------------------------------------------------------------

Example 5: jQuery inline element style get set

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>css demo</title>
  <style>
  div {
    height: 50px;
    margin: 5px;
    padding: 5px;
    float: left;
  }
  #box1 {
    width: 50px;
    color: yellow;
    background-color: blue;
  }
  #box2 {
    width: 80px;
    color: rgb(255, 255, 255);
    background-color: rgb(15, 99, 30);
  }
  #box3 {
    width: 40px;
    color: #fcc;
    background-color: #123456;
  }
  #box4 {
    width: 70px;
    background-color: #f11;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p id="result"> </p>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
 
<script>
$( "div" ).click(function() {
  var html = [ "The clicked div has the following styles:" ];
 
  var styleProps = $( this ).css([
    "width", "height", "color", "background-color"
  ]);
  $.each( styleProps, function( prop, value ) {
    html.push( prop + ": " + value );
  });
 
  $( "#result" ).html( html.join( "<br>" ) );
});
</script>
 
</body>
</html>

Tags:

Javascript Example

Recent Posts