Question

我正在尝试拉动一些交叉设备技巧。我想要的是删除小屏幕宽度（<622px）的滑块图像。我已经测试过，看到在CSS中删除图像URL会产生我想要的效果。

我的方法就是这样......

在Wordpress中将.js文件排入队列，以检测屏幕大小调整为小于622像素的宽度，然后使用.js删除带有CSS的滑块图像网址。

我的实施......

在functions.php

中排队脚本

function wpb_adding_scripts() {

    // Register and Enqueue a Script
        wp_register_script('screensizemods', get_stylesheet_directory_uri() . '/js/screensizemods.js');
    wp_enqueue_script('screensizemods');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

我的脚本/js/screensizemods.js

function Resize() {
     width = window.innerWidth;
     height = window.innerHeight;

     if(width < 622) {
          // Modify particular Stylesheet elements.

    document.styleSheets[0].addRule('background-image: url("");}');             
     }
}

但它不起作用。而且我没有得到任何控制台.js错误。我可以看到正在加载.js。我的.js代码有问题吗？

编辑：

这是我想要改变的元素。看起来主题是在线渲染...

element {
    background-image: url("http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg");

编辑2：

好的，这是我的媒体查询，观察者尝试......

屏幕调整大小时正确触发。但是我收到错误reference error: style is not defined

     // media query event handler
    if (matchMedia) {
    var mq = window.matchMedia("(min-width: 622px)");
    mq.addListener(screensizemods);
    screensizemods(mq);
    }

    // media query change
    function screensizemods(mq) {

    if (mq.matches) {
        // window width is at least 622px
    }
    else {
        // window width is less than 622px
            // push a new rule onto the top of my stylesheet
            style.css.insertRule("background-image: url('') !important}", 0); 
    }

}

Answer 1

最好通过CSS @media查询处理，即“responsive design”。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

element { background-image: url(http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg); }

@media (max-width: 622px) {
    element { background-image: none; }
}

Answer 2

你可以检查下面的代码可能会帮助你。

这里有两个答案：

1）CSS代码：

<style>
element {
    background-image: url("http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg");
}

@media (max-width: 767px) {
    element { background-image: none; }
}
</style>

2）jQuery代码：

<script type='text/javascript'>
    function checkWidth() {
        //check window width when function call.
        var windowSize = jQuery(window).width();

        if (windowSize <= 767) {
            // remove image for small size window screen.
            jQuery( 'element' ).css('background-image', 'none');
        }else{
            // add image for big size window screen.
            jQuery( 'element' ).css('background-image', 'url(http://www.example.com/wp-content/uploads/2015/05/bgimage.jpg)');
        }
    }

    jQuery(document).ready(function () {
        checkWidth();
        jQuery(window).resize(function(){
            // on window resize call function to check window width.
            checkWidth();
        });
    });
</script>

使用CSS和Javascript删除小屏幕上的图像URL

2 个答案: