CODEWITHSUNDEEP
javascriptjquerycssonloaddynamic-css
user1182504
user1182504

Reputation:

apply css on page load to all DIV elements

Is there a way to format all my tags in a page, on page load, with a css property like this ?

border:1px #000000;

Also, on hover of any of the DIV, the border should change to this :

border : 1px #00800;

I want both these properties, regular CSS and on-hover CSS to be applied on page load, dynamically.

Upvotes: 0

Views: 15559

Answers (7)

Marat Tanalin
Marat Tanalin

Reputation: 14123

You don’t need JavaScript for that. Just add the following lines to your CSS:

DIV {border: 1px #000; }
DIV:hover {border-color: #008000; }

Also, in practice, it’s unlikely that all DIV elements on your page could need such styles, so it’s better to use a class selector instead of a tag-name selector and use that class solely for elements that really need these styles:

.example {border: 1px #000; }
.example:hover {border-color: #008000; }

<div class="example">
    ...
</div>

Upvotes: 2

Sekhar
Sekhar

Reputation: 21

Call a javascript function in body using onload. and then in the func u can easily give the css for all required fields

Upvotes: 0

Riju Mahna
Riju Mahna

Reputation: 6926

This code snippet might work:

$(document).ready(function()//When the dom is ready or just add it if you already have a .ready function
{
  $("#div").css("border","1px #000000");
  $('#div').mouseover(function (e) {
   $("#div").css("border","1px #00800");
  });
});

Upvotes: 1

Stiger
Stiger

Reputation: 1199

Try this: 

$(document).ready(function() {
    // all html element
    $('*').css('border', '1px #000000');

    // hover div
    $('div').hover(function() {
        $(this).css('border', '1px #00800');
    }, function() {
        $(this).css('border', '1px #000000');
    });
});

Upvotes: 0

William Buttlicker
William Buttlicker

Reputation: 6000

In document.ready add: 

 $("*").css("border","1px #000000");

Above is for css

For hover

  $('#div').mouseover(function (e) {
    $("#div").css("border","1px #00800");
  });

Upvotes: 0

SHANK
SHANK

Reputation: 2968

you can implement a listener for the ondevice ready event:

// listen to the device ready event.
document.addEventListener( "deviceready", OnDeviceReady, false );

then in the OnDeviceReady function you can do the js part of it

function OnDeviceReady()
{
    elements.style.border = '1px solid red';
}

Hope that helps

Upvotes: 0

Ankit
Ankit

Reputation: 3181

Call a javascript method on page load and apply these css properties there.

Upvotes: 0

Related Questions