将页面加载时的css应用于所有DIV元素

时间:2013-01-22 06:34:17

标签: javascript jquery css onload dynamic-css

有没有办法在页面加载时使用像这样的css属性格式化页面中的所有标签?

border:1px #000000;

此外,在悬停任何DIV时,边框应更改为:

border : 1px #00800;

我希望动态地在页面加载时应用这些属性,常规CSS和on-hover CSS。

7 个答案:

答案 0 :(得分:3)

您不需要JavaScript。只需在CSS中添加以下行:

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

另外,实际上,页面上所有 DIV元素都不太可能需要这样的样式,因此最好使用类选择器而不是标记名称选择器并使用该类仅适用于真正需要这些样式的元素:

.example {border: 1px #000; }
.example:hover {border-color: #008000; }
<div class="example">
    ...
</div>

答案 1 :(得分:2)

此代码段可能有效:

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

答案 2 :(得分:0)

在页面加载时调用javascript方法并在那里应用这些css属性。

答案 3 :(得分:0)

您可以为onprevice ready事件实现一个侦听器:

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

然后在OnDeviceReady函数中你可以执行它的js部分

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

希望有所帮助

答案 4 :(得分:0)

在document.ready中添加:

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

以上是css

悬停

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

答案 5 :(得分:0)

试试这个:

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

答案 6 :(得分:0)

使用onload调用body中的javascript函数。然后在函数中你可以很容易地给出所有必填字段的css