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.

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.

• javascript
• jquery
• css
• onload
• dynamic-css

• Could you clarify the 'on page load dynamically part?' I am genuinely confused. – Khanal Commented Jan 22, 2013 at 6:36
• If you really want to do it, you could use jQuery to add the classes after page load, but why would you ever want to do that? A more elaborate question might prevent the downvotes. – Khanal Commented Jan 22, 2013 at 6:39
• Is there a reason you can't use CSS for this? You can control both of these with straight CSS styles. – Marc Baumbach Commented Jan 22, 2013 at 6:39
• Thanks.. I found it was not that difficult after all – user1182504 Commented Jan 22, 2013 at 6:51

7 Answers 7

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>

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

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

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

In document.ready add:

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

Above is for css

For hover

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

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

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