如何删除或隐藏它 调整浏览器大小时？

Question

这是带有“购物车”段落的购物车图标。 调整浏览器大小时，我想隐藏或删除“购物车”段落，仅显示购物车图标。 我尝试了许多不同的方法，但仍然无法做到。 我提出了三种方法：1.使用CSS选择器。 并使用媒体查询来隐藏p元素。

@media only screen and (max-width: 600px) {
 body {
    background-color: lightblue;
 }
}

2.调整浏览器大小时，使用JS删除p元素。

3.还可以使用JS添加一个新的图标元素来代替原始图标元素。

但是我不知道它们如何工作，请帮帮我，非常感谢〜

这就是我正在努力的:)

 <p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart</p>

Answer 1

编写一个媒体查询，并为您的p提供someClass或通过您自己的方式访问该标记。

@media only screen and (max-width: 600px) {
 p.someClass {
    display:none;
 }
}

更新了以下代码的复制（ 标签之外的  标签）

<p class="someClass" style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"></p><i class
  ="fa fa-shopping-cart" style="color:black;"></i> Cart

Answer 2

将Cart文字包裹在span标记内，并为该类添加hidden-sm类和CSS，如下所示。

 @media only screen and (max-width: 600px) { body { background-color: lightblue; } .hidden-sm{ display:none; } }

 <!--Demo Purpose--> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <p style="black:white;font-size:14px;font-family:Roboto; onclick="myFunction()"><i class ="fa fa-shopping-cart" style="color:black;"></i> <span class="hidden-sm">Cart</span></p>

Answer 3

您的p标签包含两个元素：

文字购物车
FontAwsome用于创建包含图标的伪元素的i标签

这样可以隐藏文本并保留图标，您可以使用简单的CSS

看这个例子

 @media only screen and (max-width: 600px) { body { background-color: lightblue; } p { font-size: 0 !important;/*hide the text using font-size*/ } .fa.fa-shopping-cart { font-size: 15px; /*show the icon using font-size*/ } } /* This style is used for the example */ p { font-size: 0 !important;/*hide the text using font-size*/ } .fa.fa-shopping-cart { font-size: 15px; /*show the icon using font-size*/ }

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <p style="black:white;font-size:14px;font-family:Roboto; onclick=" myFunction() "><i class ="fa fa-shopping-cart " style="color:black; "></i> Cart</p>

Answer 4

有两种方法可以在调整大小的浏览器上使用js完成任务，第二种方法是使用CSS。 根据我的说法，CSS是解决此问题的完美方法。我正在为您提供两种解决方案。

<!DOCTYPE html>
<html>
<head>
@media (max-width:991px){.cart span{display:none}}
</head>
<body>
<p class="cart"><i class="fa fa-cart"></i><span>Cart</span><p>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(window).resize(function(){
var winW = $(window).width();
if(winW <= 991){
$('.cart span').hide();
}else
{
$('.cart span').show();
}
});
</script>
</body>
</html>

如何删除或隐藏它 <p></p> 调整浏览器大小时？

问题描述

4 个解决方案

解决方案1
0 2018-11-27 06:03:13

解决方案2
0 2018-11-27 06:06:12

解决方案3
0 2018-11-27 06:06:47

解决方案4
0 2018-11-27 06:23:16

如何删除或隐藏它 <p></p> 调整浏览器大小时？

问题描述

4 个解决方案

解决方案1 0 2018-11-27 06:03:13

解决方案2 0 2018-11-27 06:06:12

解决方案3 0 2018-11-27 06:06:47

解决方案4 0 2018-11-27 06:23:16

解决方案1
0 2018-11-27 06:03:13

解决方案2
0 2018-11-27 06:06:12

解决方案3
0 2018-11-27 06:06:47

解决方案4
0 2018-11-27 06:23:16