在“视口”上更改“图元类型”

Change Element Type on Viewport

本文关键字：类型 图元 图元类型 视口      更新时间：2023-09-26

首先，我甚至不确定这是否可能。当视口低于500px时，我试图更改元素的HTML元素类型。这是因为我的元素有一个多页PDF（而不是蜘蛛猴）。有问题的编码如下：

HTML

<title>Agony's Awesome Spot</title>
<link rel="icon" type="image/png" href="images/yay.png">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)" href="small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)" href="medium.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery-ui-1.8.23.custom.min.js"></script>
<script src="faqs.js"></script>
<h2>Feats and/or Strengths</h2>
    <div>
        <p>Here is my StackOverflow Profile:<br></br>
            <a href="http://stackoverflow.com/users/2886993/agony">
            <img src="http://stackoverflow.com/users/flair/2886993.png" width="208" height="58" alt="profile for Agony at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for Agony at Stack Overflow, Q&amp;A for professional and enthusiast programmers"></a>
        <br></br>Get my resumé here:
        <br></br>
        <embed id="resume" height="900px" width="900px" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg">
        </p>
    </div>

我曾尝试链接到基于media="only screen and (min-width:50px) and (max-width:500px)"的<script>标签，但没有成功。基本上，我希望当用户的视口低于500px时，<embed>变成<a>标记。我可以相应地更改CSS而不会出现问题，但我不确定如何完全更改元素标记。

我不确定如何获得JSFiddle来演示这一点，所以我在这里发布了这个网站。

如有任何帮助，我们将不胜感激。

添加两个标记并操作它们的display属性

<a id="myAnchor" ...>...</a>
<embed id="resume" height="900px" width="900px" src="http://images.nationalgeographic.com/wpf/media-live/photos/000/007/cache/spider-monkey_719_600x450.jpg">

和CSS:

#resume {
    display: none;
}
@media screen and(min-width: 500px) {
    #resume {
        display: block;
    }
    #myAnchor {
        display: none;
    }
}
相关文章：