All geek questions in one place

How can I “style” an html div element?

Is there an easy way using CSS or javascript or anything really to take a div and make it not inherit any style?

I create a bookmarklet that adds a title to the site. It modifies the DOM as follows:

var bodycontent = document.body.innerHTML;
document.body.innerHTML = '';

var header = document.createElement('div');
var bodycontainer = document.createElement('div');
header.setAttribute('id', 'newdiv-header');
bodycontainer.setAttribute('id','newdiv-bodycontainer');

header.innerHTML = "MY STUFF";
bodycontainer.innerHTML = bodycontent;

document.body.appendChild(header);
document.body.appendChild(bodycontainer);

so effective that we end up with:

<html>
 <head> ...original head stuff... </head>
 <body>
  <div id="newdiv-header"> MY CONTENT </div>
  <div id="newdiv-bodycontainer"> ...original content of document.body.innerHTML... </div>
 </body>
</html>

everything is in style, so that everything can be seen, etc. The problem is that the original page stylesheet affects the appearance of my header. I would use frames and / or iframes, but this breaks down on sites that implement the framework.

Thanks so much for any ideas!

+3
source share
7 answers

, , - :)

, ? div , # newdiv-bodycontainer.

API: http://www.javascriptkit.com/domref/stylesheet.shtml

: , , , . .

: http://www.javascriptkit.com/dhtmltutors/externalcss2.shtml

: . - ( ), .

for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) {
    var selector = document.styleSheets[0].cssRules[i].selectorText;
    var declaration = document.styleSheets[0].cssRules[i].style.cssText;

    document.styleSheets[0].deleteRule(i);
    document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i);
    alert(document.styleSheets[0].cssRules[i].selectorText);
}

HTML, . Firefox Chrome, IE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" > 
<html>
<head>
<title>Test</title>

    <style type="text/css">
        .test {
            background-color:red;
            border: black solid 1px;
        }
    </style>
</head>
<body>
    <div class="test" style="width: 10em;">
        This is some text that is probably long enough to wrap.
        <div class="test test2">Test2</div>
    </div>

    <script language="javascript">
        for (var i = 0; i < document.styleSheets[0].cssRules.length; ++i) {
            var selector = document.styleSheets[0].cssRules[i].selectorText;
            var declaration = document.styleSheets[0].cssRules[i].style.cssText;

            document.styleSheets[0].deleteRule(i);
            document.styleSheets[0].insertRule('.test ' + selector + '{' + declaration + '}', i);
            alert(document.styleSheets[0].cssRules[i].selectorText);
        }
    </script>
</body>
</html>
+1

- CSS ( , ). , div.

+4

, iframe div.

+3

@chris166 CSS, . , ( "" ) , CSS/ ( reset).

// in javascript
foo.className += ' zero'; // multiple classes (space seperated)

/* then in CSS */
.foo.zero { padding: 0px; }

CSS , , , IE6, (, CSS, , , )

+2

, , , # newdiv-header.

CMS - , , , ! important.

0

, jQuery - .

jQuery HTML, , .

, , div jQuery . , .

, jQuery .

0

, reset , . , , Firebug, div .

In Firebug check the item. Go to the right pane and select the down arrow next to the word Style. Then select Show Calculated Styles. This is a lot of copying, but it solves the problem with your frame.

0
source

Source: https://habr.com/ru/post/1713784/

More articles:


All Articles