更改嵌入式CSS样式

Question

有无论如何，我可以根据屏幕大小动态更改此代码行的嵌入式样式？

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

我想追加或动态地改变的宽度：20％至宽度：100％ - 如果该浏览器尺寸为786px或更小，但只在特定的类。

任何帮助表示赞赏。

Answer 1

你可以调用的函数下面，或者你可以追加到on resize方法的功能（如果浏览器的宽度变化）：

document.onresize = updateWidth; 

纯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 2

您可以尝试使用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 3

你可能需要像

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

Answer 4

您可以使用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

更多信息，请参见https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries使用Javscript和媒体查询一起。

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

只需调整选择器以符合您的喜好。