从 CSS 媒体查询更改 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28334845/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing HTML from CSS media query
提问by rickzipser
I have a situation in which I want to change an HREF in an unordered list in HTML when a CSS media query is true. Specifically I want to change an HREF from calendar.html to calendar2.html in the following page. Is this even possible? Here is the code.
我有一种情况，当 CSS 媒体查询为真时，我想更改 HTML 中无序列表中的 HREF。具体来说，我想在下一页中将 HREF 从 calendar.html 更改为 calendar2.html。这甚至可能吗？这是代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style>
@media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.header {
display:none;
}
.maincontent{
text-align:left;
}
.content {
width: 100%;
}
.footer {
display:none;
}
.sidebar1 {
float:none;
display:none;
}
.maincontent div {
text-align:left;
}
.calendar {
width=550%;
}
}
</style>
<title>Untitled Document</title>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Cliff's Show Schedule</title>
<!-- InstanceEndEditable -->
<style type="text/css">
<!--
-->
</style>
<!--[if lte IE 7]>
<style>
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
</style>
<![endif]-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />
<link href="cliff.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<script type="text/javascript" src="p7pm3/p7PM3scripts.js"></script>
<link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header"><img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" />
<!-- end .header --></div>
<div class="content">
<div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Resort</a>
<ul>
<li><a href="facilities.html">Our Facility</a></li>
<li><a href="Kennel.html">Boarding & Daycare</a></li>
<li><a href="spa.html">Grooming</a></li>
<li><a href="sparates.html">Rates</a></li>
<li><a href="friendsgallery.html">Our Guests</a></li>
</ul>
</li>
<li><a href="#">Show Handling</a>
<ul>
<li><a href="handlinginfo.html">Info</a></li>
<li><a href="handlingrates.html">Rates</a></li>
<li><a href="calendar.html">Schedule</a></li>
</ul>
</li>
<li><a href="pics.html">Photo Gallery</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="Contact3.html">Contact Me</a></li>
</ul>
<script type="text/javascript">P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)</script>
</div>
<br />
<!-- InstanceBeginEditable name="heading" -->
<h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;">Cliff's Show Schedule</h1>
<!-- InstanceEndEditable -->
<div class="maincontent"><!-- InstanceBeginEditable name="content" -->
<iframe class="calendar" src="https://www.keepandshare.com/calendar28/show.php?i=2585375&ifr=y&colorreset=y&nw=y&vw=week28&themeChoice=0&md=30&nopopup=n&fsz=11&noviewmenu=y&noname=y&nobreak=y&noprint=y&norequest=n&nosearch=n&norss=y&noovl=y&notz=y&fd=n&sa=y&exedit=n&nonav=n&scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"></iframe><p align="center"><a href="https://www.keepandshare.com/calendar28/mobile.php?i=2585375&mode=event" target="_blank">View a Mobile Version of this Calendar</a></p><!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 -->
</iframe>
<!-- InstanceEndEditable --></div>
<!-- end .content --></div>
<div class="sidebar1"><!-- InstanceBeginEditable name="sidebar" -->
<p style="font-size:larger; font-family:'Comic Sans MS', cursive"> </p><p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Most shows close two weeks prior to show date on Wednesday.</p>
<p style="font-size:16pt; font-family:'Comic Sans MS', cursive"> Call early if you would like me to handle your dog.</p>
<p><a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new">Enter a show via Infodog</a
></p>
<!-- InstanceEndEditable -->
<!-- end .sidebar --></div>
<div class="footer">
<div style="float:right">
<p> <a href="MAILTO:[email protected]" >Site Designed by Fredric M. Zipser</a><br />
</p>
</div>
<div class="clearfloatleft">
<p>Clifford W. Steele Professional Handler <br />
1395 Rt. 6<br />
Carmel, NY 10512-1627<br />
United States<br />
ph:(845) 225-2463<br />
Cell:(845) 661-0010<br />
<a href="MAILTO:[email protected]" >[email protected]</a></p>
</div>
<!-- end .footer --></div>
<!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>
</body> 回答by Varavut Lormongkol
I think it will easy if you create both link in html
我认为如果您在 html 中创建两个链接会很容易
<li id="schedule_link_mobile">
<a href="calendar2.html" >Schedule</a>
</li>
<li id="schedule_link_pc">
<a href="calendar.html" >Schedule</a>
</li>
and then use the css to hide the one that you don't want to show
然后使用 css 隐藏您不想显示的那个
#schedule_link_mobile{
display: none;
}
#schedule_link_pc{
display: inline-block;
}
@media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
#schedule_link_mobile{
display: inline-block;
}
#schedule_link_pc{
display: none;
}
}
回答by CodinCat
I don't think CSS can alter HTML attributes
我不认为 CSS 可以改变 HTML 属性
you can just "hide" it, and display the other one
你可以“隐藏”它，并显示另一个
@media only screen and (...) {
.your-default-calendar {
display: none;
}
.your-calender2 {
display: inline-block;
}
}
but why not just use JavaScript? you can change a attribute easily in JavaScript.
但为什么不直接使用 JavaScript 呢？您可以在 JavaScript 中轻松更改属性。
if (window.matchMedia("your media queries").matches) {
// ...
}
回答by Luke 5 Dev
On a related note... You can manipulate HTML using CSS content...
The following taken from Chris Coyier at CSS-tricks.com
相关说明...您可以使用 CSS 操作 HTML content...以下内容来自 CSS-tricks.com 的 Chris Coyier
.email-address:before {
content: "Email address: "; }
<ul>
<li class="email-address">[email protected]</li>
</ul>
And the output would be like:
输出将如下所示：
? Email address: [email protected]
回答by DavidNJ
The question to ask is: How will the hidden content be used.
要问的问题是：如何使用隐藏的内容。
The display CSS property hides HTML that is already built. If you have mobile, tablet, and desktop HTML, the application can be building HTML and applying CSS 3x while only displaying once.
display CSS 属性隐藏已经构建的 HTML。如果您有手机、平板电脑和桌面 HTML，应用程序可以构建 HTML 并应用 CSS 3x，同时只显示一次。
If it will be turned on and off, display works. If it will use either a mobile or a tablet or a desktop display and never use the others, using Javascript to add the content is better.
如果它将被打开和关闭，显示工作。如果它将使用手机或平板电脑或桌面显示器，而从不使用其他显示器，则使用 Javascript 添加内容会更好。
Note that AngularJS has ngIf and ngSwitch directives that accomplish that only using HTML attributes.
请注意，AngularJS 有 ngIf 和 ngSwitch 指令，它们仅使用 HTML 属性来完成。
