gpt4 book ai didi

javascript - 使用 CSS 和 Javascript 删除小屏幕上的图片 URL

转载 作者:太空宇宙 更新时间:2023-11-04 11:53:15 25 4
gpt4 key购买 nike

我正在尝试使用一些跨设备技巧。我想要的是删除小屏幕宽度(<622px)的 slider 图像。我已经测试过,发现在 CSS 中删除图片 URL 会产生我想要的效果。

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

在 Wordpress 中加入一个 .js 文件以检测屏幕何时调整为宽度小于 622 像素,然后使用 .js 通过 CSS 删除 slider 图像 url。

我的实现...

将脚本放入 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);
}

}

最佳答案

这最好通过 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; }
}

关于javascript - 使用 CSS 和 Javascript 删除小屏幕上的图片 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30470474/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com