jquery - 将 css 转换为 jquery

Question

我有这个CSS：

@media only screen and (max-height: 620px) {
#howto img {
    margin-left:150px;
}
.boilerplate {
    text-align:right;
}
.footer .boilerplate .links {
    float:right;
}
.footer {
    text-align:right !important;
}

}

我想用 jQuery 做这个 css。我该怎么做？

Answer 1

试试这个：

$("document").ready(function(){  
    if ($(window).width() <= 620) {
      $("#howto img").css("margin-left", "150");
      $(".boilerplate").css("text-align", "right");
      $(".footer .boilerplate .links").css("float", "right");
      $(".footer").css("text-align", "right");
    }
});

Answer 2

例如

$("document").ready(function(){
  $(".boilerplate").css("text-align","right");
});

但是您必须在 jquery 中制作每种样式。另一种可能性是使样式完全由数据库驱动并循环。

Answer 3

$(window).resize(function(){  
    if ($(window).width() <= 620) {
      $("#howto img").css("margin-left", "150");
      $(".boilerplate").css("text-align", "right");
      $(".footer .boilerplate .links").css("float", "right");
      $(".footer").css("text-align", "right");
    }else{    /*Asuming you didn't have any inline style before*/
         $('#howto img,.boilerplate,.footer,.footer .boilerplate .links').removeAttr('style'); 
         /*To restore de original styles*/
    }
});

Answer 4

你试过豆汤吗？他们有一个不错的 CSS 到 jQuery 转换器。

有时，转换存在一些问题，但大多数都很好。