php - 我使用的 jQuery 未检测到 CSS 正文 :after

Question

我正在使用一些 jQuery 来检测是否触发了某个媒体查询，如下所示:

jQuery

var currentSize = "default";
var mqCSS = function () {
    var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
    size = size.replace(/"/g, "");
    size = size.replace(/'/g, "");
    return size;
};

function mobile_load_img(obj) {
    size = obj();
    if (size != currentSize) {
        if (size == 'laptop') {
              alert('hello');
            currentSize = 'mobile';
        }
    } //if size

}
mobile_load_img(mqCSS);

CSS

@media only screen and (min-width: 10em) {
    body:after {
        content:'laptop';
        display:none;
    }
}

这应该有效，它在我的主页上有效，但仅在任何其他页面上无效。脚本肯定正在加载。

这是一个 fiddle

我能想到的唯一其他问题可能是我如何对脚本进行排队。我不确定为什么，但我认为这个问题是在我开始设置 tilemtime() 以停止某些 CDN 缓存时发生的。我不太清楚为什么，因为它们看起来都很好。

抱歉代码块:

PHP

function lart_stylesheets() {
    if (!is_admin()) {
        wp_enqueue_style('reset_style', get_stylesheet_directory_uri().'/css/reset.css',
        array(), 'all');
        wp_enqueue_style('base_style', get_stylesheet_directory_uri().'/css/base_style.css',
        array('reset_style'), '1.0', 'all');
    }
    if (is_home()) {
        wp_enqueue_style('home-style', get_template_directory_uri().'/css/home.css', array(), filemtime(get_stylesheet_directory().'/css/home.css'));
    }
    if (is_single() || is_page('LART TV') || is_category() || is_page('We\'re Wearing') || is_page('archives')) {
        wp_enqueue_style('single-style', get_stylesheet_directory_uri().'/css/single.css', array(), filemtime(get_stylesheet_directory().'/css/single.css'));
        wp_enqueue_style('lightbox', get_stylesheet_directory_uri().'/css/lightbox.css',
        array(), '1.0', 'all');
    }
}

function lart_front_end_scripts() {
    wp_deregister_script('jquery');
    wp_deregister_script('jquery-migrate.min');
    wp_deregister_script('comment-reply.min');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js', false, '3.6', true);
    if (!is_admin()) {
        wp_register_script('mainJS', get_template_directory_uri().'/js/mainJS.js', array('jquery', 'underscore'), filemtime(get_stylesheet_directory().'/js/mainJS.js'), true);
        wp_enqueue_script('mainJS');
        wp_register_script('hammer', get_template_directory_uri().'/js/hammer.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/hammer.js'), true);
        wp_enqueue_script('hammer');
    }
    if (is_home()) {
        wp_register_script('homeJS', get_template_directory_uri().'/js/home.js', array('jquery', 'underscore', 'jquery-masonry'), filemtime(get_stylesheet_directory().'/js/home.js'), true);
        wp_enqueue_script('homeJS');
    }
    if (is_single() || is_page('LART TV') || is_category() || is_page('We\'re Wearing')) {
        wp_register_script('singleJS', get_template_directory_uri().'/js/single.js', array('jquery', 'carousel'), filemtime(get_stylesheet_directory().'/js/single.js'), true);
        wp_enqueue_script('singleJS');
        wp_register_script('lightbox', get_template_directory_uri().'/js/lightbox.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/lightbox.js'), true);
        wp_enqueue_script('lightbox');
        wp_register_script('inviewJS', get_template_directory_uri().'/js/inview.js', array('jquery', 'singleJS'), filemtime(get_stylesheet_directory().'/js/inview.js'), true);
        wp_enqueue_script('inviewJS');
        wp_register_script('spinJS', get_template_directory_uri().'/js/spin.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/spin.js'), true);
        wp_enqueue_script('spinJS');
        wp_register_script('carousel', get_template_directory_uri().'/js/carousel.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/carousel.js'), true);
        wp_enqueue_script('carousel');
    }
    if (is_page('LART TV')) {
        wp_register_script('lartTVJS', get_template_directory_uri().'/js/lartTV.js', array('jquery', 'jquery-masonry'), filemtime(get_stylesheet_directory().'/js/lartTV.js'), true);
        wp_enqueue_script('lartTVJS');
    }
    if (is_page('We\'re Wearing')) {
        wp_register_script('whatwearingJS', get_template_directory_uri().'/js/whatwearing.js', array('jquery-masonry'), filemtime(get_stylesheet_directory().'/js/whatwearing.js'), true);
        wp_enqueue_script('whatwearingJS');
    }
    if (is_search() || is_page('archives')) {
        wp_register_script('archiveJS', get_template_directory_uri().'/js/archive.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/archive.js'), true);
        wp_enqueue_script('archiveJS');
        wp_register_script('spinJS', get_template_directory_uri().'/js/spin.js', array('jquery'), filemtime(get_stylesheet_directory().'/js/spin.js'), true);
        wp_enqueue_script('spinJS');
    }
} //End add_scripts

我的脚本和样式表入队时有什么地方做错了吗？

可能是时间问题还是什么？

Answer 1

出于某种原因我没有得到(可能是浏览器的惰性计算)，如果设置了 display:none;，则不会计算样式(至少在页面加载时)，因此您可以'通过 window.getComputedStyle() 访问它。 我通过简单地提醒 size 变量对此进行了测试。

一种解决方法是在您的样式上使用 visibility:hidden; :

body:after {
    content:'laptop';
    visibility:hidden;
}

Here's a demo ，但你应该考虑使用@Bojangles 选项， window.matchMedia ；它会用这段代码替换你所有的代码:

if (window.matchMedia("(min-width: 10em)").matches)
    currentSize = 'mobile';