Question

无论如何我可以根据屏幕大小动态更改这行代码的内联样式吗？

<div class="et_lb_module et_lb_column et_lb_resizable" style=" width: 20%;">

我想追加或动态更改宽度：20％到宽度：100％ - 如果浏览器大小为786px或更低，但仅限于该特定类。

任何帮助表示感谢。

Answer 1

您可以尝试使用window.matchMedia()（以及其他方法）：

if (window.matchMedia('all and (max-width: 786px)') {
    $('div.et_lb_module.et_lb_column.et_lb_resizable').width('100%');
}

或者，假设您正在使用jQuery（并且可能希望这在两种样式之间交替）：

$(window).resize(function(){
    $('div.et_lb_module.et_lb_column.et_lb_resizable').width(
        window.matchMedia('all and (max-width: 786px)') ? '100%' : '20%'
    );
});

顺便提一下，如果该样式位于样式表中，而不是内联样式，则可以简单地使用CSS：

@media (all and (max-width: 786px)) {
    div.et_lb_module.et_lb_column.et_lb_resizable {
        width: 100%;
    }
}
@media (all and (min-width: 786px)) {
    div.et_lb_module.et_lb_column.et_lb_resizable {
        width: 20%;
    }
}

参考文献：

JavaScript的：
- window.matchMedia()。
jQuery的：
- resize()。
- width()。

Answer 2

您可以使用window.matchMedia()。请记住添加媒体查询侦听器，以使其更改不仅仅是初始窗口大小。这应该比绑定到resize事件更有效。

var div = document.querySelector(".et_lb_module.et_lb_column.et_lb_resizable");
var mql = window.matchMedia("screen and (max-width: 786px)");
mql.addListener(handleMediaQuery);
handleMediaQuery(mql);

function handleMediaQuery(mql) {
    if (mql.matches) {
        div.style.width = "100%"
    } else {
        div.style.width = "20%"
    }
}

JSFiddle

有关一起使用Javscript和媒体查询的详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries。

Answer 3

你可以调用下面的函数，或者你可以在on resize方法中附加一个函数（如果浏览器宽度改变）：

document.onresize = updateWidth;

Pure JavaScript：

function updateWidth(){

var widthFactor = 0.2;

if(window.innerWidth > 768){
     widthFactor = 1.0;
}

    document.getElementsByClassName("et_lb_module et_lb_column et_lb_resizable")[0].style.width= widthFactor * window.innerWidth + "px";
}

jQuery的：

function updateWidth(){

var widthFactor = 0.2;

if(window.innerWidth > 768){
     widthFactor = 1.0;
}

    $("et_lb_module et_lb_column et_lb_resizable").css("width", (widthFactor * window.innerWidth));
}

Answer 4

你可能需要像

这样的东西

if(screen.width > 786) {
    $('your_element').css('width', '100%');
}

Answer 5

的Javascript / jQuery的：

$(document).ready(function() {
  $(window).resize(function() {

    if( $(document).width() <= 768 ){
      $(".et_lb_module.et_lb_column.et_lb_resizable").css({ width: "100%" });
    } else {
      $(".et_lb_module.et_lb_column.et_lb_resizable").css({ width: "20%" });
    }

  }
}

Answer 6

你可以这样做：

<div class="et_lb_module et_lb_column et_lb_resizable" style=" width: 20%;">
<script>
   jQuery(document).ready(function($) {
      setSize($)
      $(window).resize(function(){setSize($)});
   });

   function setSize($){
      $('.et_lb_resizable').width(($(window).width() < 786 ? '100%' : '20%'));
   }
</script>

Answer 7

你不需要Javascript来做到这一点。你可以使用普通的CSS：

@media (max-width: 768px) {
  .et_lb_module.et_lb_column.et_lb_resizable {
    width: 100% !important;
  }
}

只需根据自己的喜好调整选择器。

更改内联CSS样式

7 个答案: