Question

首先，我甚至不确定这是否可行。我试图在视口低于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>

我尝试根据<script>链接到media="only screen and (min-width:50px) and (max-width:500px)"代码，但这不起作用。基本上我想要发生的是当用户的视口低于500px时，<embed>变为<a>标签。我可以相应地更改CSS而不会出现问题，但我不确定如何完全更改元素标记。

我不确定如何让JSFiddle证明这一点，所以我发布了网站here。

非常感谢任何帮助。

Answer 1

添加两个标记并操纵其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;
    }
}

在视口上更改元素类型

1 个答案: