CODEWITHSUNDEEP
htmlcss
stanleyxu2005
stanleyxu2005

Reputation: 8241

Keep DIV to have isolated style definition

I use metro-ui-css for my webapp, the look and feel is great. Now I load a word document (with its own style) into a DIV. After word document is loaded, it will override some metro-ui-css style rules, so that the look and feel becomes unexpectedly...

To simplify the problem, I create a demo below. After clicking the button, I want only text below to be blue, not all of them. The question is besides using <iframe>, is it possible to isolate the style definition?

function insert() {
    $('#fragment').html(`
                <html>
                    <head>
                        <style>*{color:red}</style>
                    </head>
                    <body>
                        <div>INNER CONTENT SHOULD BE RED</div>
                    </body>
                </html>`
            );
}
<html>
<head>
  <style>*{color:blue}</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <p>OUTER CONTENT SHOULD BE BLUE</p>
  <button onclick="insert()">Load into DIV</button>
  <div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>

Upvotes: 0

Views: 90

Answers (2)

Asons
Asons

Reputation: 87191

Since CSS :scope is experimental and the loaded content is out of control, you could do like this, where you give the outer most body a unique id and use that to get highest possible specificity for your controlled elements.

Also, when target your controlled elements, you need to make sure to use highest specificty possible, so those rules doesn't override the loaded one's, or get overridden by the uncontrolled content rules.

As you see when click the button, its text gets red but not the wrapped elements.

function insert() {
  $('#fragment').html(`
                <html>
                    <head>
                        <style>*{color:red}</style>
                    </head>
                    <body>
                        <div>INNER CONTENT SHOULD BE RED</div>
                    </body>
                </html>`);
}
#outer-body > .wrapper * {
  color: blue
}
#outer-body > .wrapper .other {
  color: lime;
  margin: 10px 0;
}

#outer-body > #fragment {  
  margin-top:10px;
  border:1px dashed black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body id="outer-body">

  <div class="wrapper">

    <p>OUTER CONTENT SHOULD BE BLUE</p>

    <div class="other">
      Other text target with its class
    </div>

  </div>

  <button onclick="insert()">Load into DIV</button>

  <div id="fragment">PLACEHOLDER</div>

</body>

Upvotes: 1

Madalina Taina
Madalina Taina

Reputation: 1978

I understand you can't modify the html and you must change the function so the div has red text. You can do that by changing in <style>div{color:red;}</style>

function insert() {
  $('#fragment').html(`
<html>
<head>
  <style>div{color:red;}</style>
</head>
<body>
  <div>INNER CONTENT SHOULD BE RED</div>
</body>
</html>`);
}
<html>
<head>
  <style>*{color:blue}</style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <p>OUTER CONTENT SHOULD BE BLUE</p>
  <button onclick="insert()">Load into DIV</button>
  <div id="fragment" style="margin-top:10px;border:1px dashed black">PLACEHOLDER</div>
</body>
</html>

Upvotes: 1

Related Questions