apply css on page load to all DIV elements

Question

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.

Answer 1

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");
  });
});

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

In document.ready add:

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

Above is for css

For hover

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

Answer 6

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');
    });
});

Answer 7

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