title: javascript get style from style element and replace with another style
body: <p>I have a style element that dynamically renders the styles so i have:</p>
  <pre><code>&lt;style&gt;
      #DIV011b9769a89ae14b5bbe30616d77e9a09d
      { 
        padding-left:30px;
        padding-right:30px;
        padding-top:30px;padding- 
        bottom:30px;
        width:100%;
        background-color:#bc3333; 
      }
      @media(min - width: 600px) and(max - width: 960px){
          #DIV011b9769a89ae14b5bbe30616d77e9a09d
          { }
      }
      @media(min - width: 480px) and(max - width: 600px){
          #DIV011b9769a89ae14b5bbe30616d77e9a09d
          { }
      }
      @media screen and(max - width: 480px){
          #DIV011b9769a89ae14b5bbe30616d77e9a09d
          { }
      }
      #DIV011b9769a89ae14b5bbe30616d77e9a09d: hover
      { }
      @media(min - width: 600px) and(max - width: 960px){
          #DIV011b9769a89ae14b5bbe30616d77e9a09d: hover
          { }
      }
      @media(min - width: 480px) and(max - width: 600px){
          #DIV011b9769a89ae14b5bbe30616d77e9a09d: hover
          { }
      }
      @media screen and(max - width: 480px){
          #DIV011b9769a89ae14b5bbe30616d77e9a09d: hover
          { }
      }
      &lt;/style&gt;
  </code></pre>
  <p>What i need to do is replace the whole of the first style which is #DIV011b9769a89ae14b5bbe30616d77e9a09d
  to padding:0px;</p>
  <p>I also need to replace #DIV011b9769a89ae14b5bbe30616d77e9a09d: hover { }, when i add new styles dynmaically</p>
  <p>Also if the style in the media query changes i need to replace the styles in the media query for the element if teh style for this id #DIV011b9769a89ae14b5bbe30616d77e9a09d changes .</p>
  <p>The #DIV011b9769a89ae14b5bbe30616d77e9a09d is the indicator to say replace this style with another new style.</p>
  <p>How can i achieve this?</p>