title: Changing HTML from CSS media query
body: <p>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.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;!-- InstanceBegin template="/Templates/cliffsteele.dwt" codeOutsideHTMLIsLocked="false" --&gt;
  &lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=11;IE=10; IE=9; IE=8; IE=7; IE=EDGE" /&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name="viewport" content="width=device-width" /&gt;
  
  &lt;style&gt;
  @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%;
   }
   }
   
  &lt;/style&gt; 
  
  
  &lt;title&gt;Untitled Document&lt;/title&gt;
  
  
  &lt;!-- InstanceBeginEditable name="doctitle" --&gt;
  &lt;title&gt;Cliff's Show Schedule&lt;/title&gt;
  &lt;!-- InstanceEndEditable --&gt;
  
  &lt;style type="text/css"&gt; 
  &lt;!--
  --&gt;
  &lt;/style&gt; 
  
  &lt;!--[if lte IE 7]&gt;
  &lt;style&gt;
  .content { margin-right: -1px; } 
  ul.nav a { zoom: 1; } 
  &lt;/style&gt;
  &lt;![endif]--&gt;
  
  &lt;link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" /&gt;
  &lt;link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" /&gt;  
  
  &lt;link href="cliff.css" rel="stylesheet" type="text/css" /&gt; 
   
  &lt;!-- InstanceBeginEditable name="head" --&gt;
  
  &lt;!-- InstanceEndEditable --&gt;
  
  &lt;script type="text/javascript" src="p7pm3/p7PM3scripts.js"&gt;&lt;/script&gt;
  &lt;link href="p7pm3/p7PM3-01.css" rel="stylesheet" type="text/css" media="all" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;       
                               
  &lt;div class="container"&gt;
  
    &lt;div class="header"&gt;&lt;img src="Pictures/logo.gif" alt="Logo" name="Insert_logo" width="81" height="63" id="Insert_logo" style="background: #8090AB; display:block;" /&gt; 
       
  &lt;!-- end .header --&gt;&lt;/div&gt;
  
  
    
  
    &lt;div class="content"&gt;
      &lt;div id="p7PM3_1" class="p7PM3-01 p7PM3 p7PM3noscript horiz menu-centered rounded auto-subs sub-left"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Resort&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="facilities.html"&gt;Our Facility&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="Kennel.html"&gt;Boarding &amp;amp; Daycare&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="spa.html"&gt;Grooming&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="sparates.html"&gt;Rates&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="friendsgallery.html"&gt;Our Guests&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Show Handling&lt;/a&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;a href="handlinginfo.html"&gt;Info&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="handlingrates.html"&gt;Rates&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="calendar.html"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="pics.html"&gt;Photo Gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="aboutme.html"&gt;About Me&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="Contact3.html"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;script type="text/javascript"&gt;P7_PM3op('p7PM3_1',1,8,-5,-5,0,1,0,1,0,1,1,1,0,900,1,0)&lt;/script&gt;
      &lt;/div&gt;
  &lt;br /&gt;
  &lt;!-- InstanceBeginEditable name="heading" --&gt;
  &lt;h1 style="margin: 10px; clear: both; text-align:center; font-size: xx-large; font-family: Georgia, 'Times New Roman', Times, serif; padding-top:20px;"&gt;Cliff's Show Schedule&lt;/h1&gt;
  &lt;!-- InstanceEndEditable --&gt;
  
  
  &lt;div class="maincontent"&gt;&lt;!-- InstanceBeginEditable name="content" --&gt;
  
  &lt;iframe class="calendar"  src="https://www.keepandshare.com/calendar28/show.php?i=2585375&amp;amp;ifr=y&amp;amp;colorreset=y&amp;amp;nw=y&amp;amp;vw=week28&amp;amp;themeChoice=0&amp;amp;md=30&amp;amp;nopopup=n&amp;amp;fsz=11&amp;amp;noviewmenu=y&amp;amp;noname=y&amp;amp;nobreak=y&amp;amp;noprint=y&amp;amp;norequest=n&amp;amp;nosearch=n&amp;amp;norss=y&amp;amp;noovl=y&amp;amp;notz=y&amp;amp;fd=n&amp;amp;sa=y&amp;amp;exedit=n&amp;amp;nonav=n&amp;amp;scroll=y" width="700" height="600" scrolling="Yes" frameborder="1"&gt;&lt;/iframe&gt;&lt;p align="center"&gt;&lt;a href="https://www.keepandshare.com/calendar28/mobile.php?i=2585375&amp;amp;mode=event" target="_blank"&gt;View a Mobile Version of this Calendar&lt;/a&gt;&lt;/p&gt;&lt;!-- For help on embedding calendars go to http://support.keepandshare.com/support/solutions/97807 --&gt;
  &lt;/iframe&gt;
  
  &lt;!-- InstanceEndEditable --&gt;&lt;/div&gt;
      &lt;!-- end .content --&gt;&lt;/div&gt;
    
  &lt;div class="sidebar1"&gt;&lt;!-- InstanceBeginEditable name="sidebar" --&gt; 
        &lt;p style="font-size:larger; font-family:'Comic Sans MS', cursive"&gt;&amp;nbsp; &lt;/p&gt;&lt;p style="font-size:16pt; font-family:'Comic Sans MS', cursive"&gt; Most shows close two weeks prior to show date on Wednesday.&lt;/p&gt;
     &lt;p style="font-size:16pt; font-family:'Comic Sans MS', cursive"&gt; Call early if you would like me to handle your dog.&lt;/p&gt;
     &lt;p&gt;&lt;a style="font-size: small;" href="http://www.infodog.com/showinfo/showCal.htm" title="Infodog" target="_new"&gt;Enter a show via Infodog&lt;/a
       
    &gt;&lt;/p&gt;
  &lt;!-- InstanceEndEditable --&gt;
    &lt;!-- end .sidebar --&gt;&lt;/div&gt;
    
    
    &lt;div class="footer"&gt;
     
        &lt;div style="float:right"&gt;
          &lt;p&gt; &lt;a  href="MAILTO:rickzipser@hotmail.com" &gt;Site Designed by Fredric M. Zipser&lt;/a&gt;&lt;br /&gt;
            
         &lt;/p&gt;
      &lt;/div&gt; 
     
      &lt;div class="clearfloatleft"&gt;
          &lt;p&gt;Clifford W. Steele  Professional Handler &lt;br /&gt;
            1395 Rt. 6&lt;br /&gt;
            Carmel, NY  10512-1627&lt;br /&gt;
            United States&lt;br /&gt;
            ph:(845) 225-2463&lt;br /&gt;
            Cell:(845) 661-0010&lt;br /&gt;
          &lt;a  href="MAILTO:happydayskennelinc@hotmail.com" &gt;happydayskennelinc@hotmail.com&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
    
    &lt;!-- end .footer --&gt;&lt;/div&gt;
    
  &lt;!-- end .container --&gt;&lt;/div&gt;
  
  &lt;/body&gt; 
  &lt;!-- InstanceEnd --&gt;&lt;/html&gt;
  &lt;/body&gt; </code></pre>
  </div>
  </div>
  </p>