All geek questions in one place

How to isolate a specific element on a web page?

I have this thing on my web page ... I think it could be called widgets ...

How to separate its CSS and JS from the contained CSS and JS page? preferably without using an iframe?

In my application, the user can customize the CSS of the content, so I need a clean list.

+3
source share
3 answers

In the outermost element of your widget, set a relatively unique class name. For instance:

<div class="my_spiffy_widget">
  <!-- Insert spiffy widget here -->
</div>

Put Javascript and CSS in your own files. For CSS, create all your selectors as follows:

.my_spiffy_widget P { /* paragraph rules */ }
.my_spiffy_widget A { /* anchor rules */ }
.my_spiffy_widget UL { /* unordered list rules */ }

This ensures that your rules are not accidentally overridden by other CSS rules.

JavaScript :

function my_spiffy_widget_doSomething() {...}

, , :

var my_spiffy_widget_firstTime = true;
+4

, .

:

div.widget #header {
    padding-left: 10px !important;
    padding-right: 5px !important;
}

/ CSS reset script (, Eric Meyer's) DIV.

+1

css , , (, "KAFHxyz _..." ). , "".

, CSS !important ( "body {font...}", .

javascript, , "" ( JS/CSS), reset , . , , , .

[] , , iframe JavaScript (DOM ) , ? IFrame Div-like, " " CSS JS.

0

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

More articles:


All Articles