Question

我正在处理一个我需要添加的元素，重要的是＆＃39;我使用JS动态创建的内联样式，以覆盖由另一个人开发的样式表中存在的几种CSS样式。不幸的是，这些样式表在全球范围内使用，并且这个特定区域有一大堆重要的内容，我无法修改而不会有改变整个站点中存在的先前标题的风险。我的JS技能相当粗糙，因此我有一个粗略的想法。

以下是我目前的代码段：

fixTextPosition: function()
{
  var width = $( window ).width();
    if (width > 1451){
      width = 1451;
    }
  var height = $( window ).height();
    if (height > 816){
      height = 816;
    }
  $("#banner-resize").css("minheight", height);
    if (height < 816){
      $("#banner-resize").css("minHeight", height - 1);
    }
}

我试图追加＆＃34;！important＆＃34;到了＆＃34; minHeight＆＃34;经过（高度 - 1）之后的值，似乎无法弄清楚如何将值添加为字符串。

提前感谢任何帮助者！

在答案后修改

感谢所有提出一些想法的人 - 我会在这里发布我的问题，以确保我的下一个问题得到更好的表达和更多的背景。：）

上面的问题是指一个全局标题元素，它有几个＆＃34; min-height = x！important＆＃34;存在于以前的开发者创建的全球样式表中 - 这意味着我不能像我希望的那样自由地玩。我能够通过创建一个包含所有以前的定位样式和新的＆＃34; min-height = x＆＃34;的新类来解决它。 sans＆＃39;！important＆＃39;这让我可以根据需要使用上面的JS。

我仍然很想知道是否有一个更简单的JS解决方法来附加一个“重要的”＆＃39;因为我不想在每次遇到这种特殊情况时都想创建新课程。

Answer 1

如果您通过jQuery设置任何CSS样式，则此样式将添加到DOM元素样式属性。

例如，如果您有元素：

<p class="test" id="testId">

你将通过jQuery添加样式：

$(".test").css("min-height", 30);

在您的DOM中，您现在将拥有：

<p class="test" id="testId" style="min-height: 30px">

样式属性中的样式会覆盖CSS文件中的样式，除非您在CSS文件中使用！impotrant。

只是不要在CSS中使用！important。当你通过jQuery设置新的样式值时，它会自动覆盖样式值。

如何在没有jQuery的情况下设置min-height样式属性：

by'id'属性：

document.getElementById("testId").style.minHeight = "30px";

by'class'属性：

document.querySelector(".test").style.minHeight = "30px";

querySelector - 获取第一个带有'test'类的元素

var elementsList = document.querySelectorAll(".test");
for (var i = 0, len = elementsList.length; i < len; i++) {
  elementsList[i].style.minHeight = "30px";
}

查询选择器在所有现代浏览器中都可用，来自IE8。但是在IE8中你不能使用CSS3选择器

Answer 2

我认为这就是你要做的事情：

fixTextPosition: function(){
 var width = $( window ).width();
 if (width > 1451){
  width = 1451;
 }
 var height = $( window ).height();
 if (height > 816){
  height = 816;
 }

 if (height < 816){
  $("#banner-resize").css("min-height", height - 1);
 }
 else{
  $("#banner-resize").css("min-height", height);
 }
}

如果以上操作不起作用，请尝试以下操作：

 fixTextPosition: function(){
 var width = $( window ).width();
 if (width > 1451){
  width = 1451;
 }
 var height = $( window ).height();
 if (height > 816){
  height = 816;
 }

 if (height < 816){
  var ht = height - 1;
  $("#banner-resize").css("min-height", ht+" !important");
 }
 else{
  $("#banner-resize").css("min-height", height+" !important");
 }
}

虽然我不赞成上述解决方案。

我的意见是你使用CSS，

 $bannerResize = $('$banner-resize')
 if (height < 816){
  $bannerResize.addClass('height815');
  $bannerResize.removeClass('height816')
 }
 else{
  $bannerResize.addClass('height816');
  $bannerResize.removeClass('height815')
 }
}

和上面的CSS应该是，

#banner-resize.height816{
  min-height:816px !important;
}
#banner-resize.height815{
  min-height:815px !important;
}

希望有所帮助。

试图追加＆＃34;！important＆＃34;使用JS创建的内联样式

2 个答案: