|
 Trouver une ressource
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
 CRÉER UNE RÈGLE CSS POUR QU'ELLE S'APPLIQUE À UNE ÉLÉMENT DONNÉ (UNE BALISE / NOEUD (X)HTML)
 Information sur la source
 Description
Voici un simple petit code JavaScript sans prétention mais qui peut se révéler utile dans certaines occasions Comme vous pouvez le constater le but ici est de simuler une publicité et de trouver une règle CSS qui permettra de la supprimer avec le moins d'effet collatéraux possibles (et si possible aucun !) Je ne vous cache pas que le choix de la publicité est loin d'être anodin vu que c'est précisément ce code (ou sa retranscription en C++) qui sera utilisé pour les CSS Filters du filtre anti-pub d'IE7Pro, si ils voient le jour. Le code prévoit plusieurs mode de fonctionnement : - IE6 (et IE7-BackCompat) ou IE7 - Normal ou Safe La distinction entre IE6 et IE7 se fait dans les sélecteurs CSS, beaucoup plus nombreuse sous IE7 qui permettent de limiter fortement le risque de dégâts collatéraux Le mode Safe ne considère plus comme suffisant une simple classe CSS ou un nom (attribut name) pour terminer la règle, alors que le monde Normal s'en contente. Voici déjà un aperçu de ce que le code peut générer : - IE 6 (normal) : DIV.adctner TABLE - IE 6 (safe) : DIV#content DIV.adctner TABLE - IE 7 (normal) : TABLE[name="table"] - IE 7 (safe) : DIV#content > DIV.adctner > TABLE[name="table"]
 Source
- <!Doctype XHTML 1.1 dtd!>
- <html>
- <head>
- <title>Catch by CSS</title>
- <style>
- pre { cursor: hand; display:inline; }
- b { float: left; width: 100px; }
- div.content { border: 1px; padding: 5px; }
- div.adctner { float:left; }
- a img { border-style: none }
- </style>
- <script type="text/javascript">
- function catchByCss(el, ie7, times, safe) {
- var isCatched = {value: false};
- safe = !(safe);
-
- ie7=(ie7 && document.compatMode!="BackCompat");
-
- function isNullOrEmpty(o) {
- return (
- typeof (o) == "undefined" ||
- o==null ||
- o=="" ||
- o==0
- );
- }
- function catchBy(el, key) {
- if (isNullOrEmpty(el[key])) {
- return "";
- }
- switch (key) {
- case "tagName":
- if (el.tagName=="BODY" || el.tagName=="HTML" || isNullOrEmpty(el.parentNode) || el.parentNode==document) {
- isCatched.value=true;
- }
- return el.tagName;
- case "id":
- if(el.id.indexOf(" ")==(-1)) {
- isCatched.value=true;
- return "#"+el.id;
- }
- if (ie7) {
- isCatched.value=true;
- return '[id="' + el.id + '"]';
- }
- return "";
- case "className":
- if (isCatched.value && String(el.id).indexOf(" ")!=(-1)) { return ""; }
- if(el.className.indexOf(" ")==(-1)) {
- isCatched.value=(safe && true);
- return "."+el.className;
- }
- return "."+(el.className).replace(/(\s)+/g, ".")
- case "name":
- if (ie7) {
- isCatched.value=(safe && true);
- return '[name="' + el.name + '"]';
- }
- return "";
- default: return "";
- }
- }
-
- var css = "";
- while (times > -1 || isNullOrEmpty(el)) {
- while (!isCatched.value) {
- try {
- var tmp = "";
- tmp += catchBy(el, "tagName");
- tmp += catchBy(el, "id");
- tmp += catchBy(el, "className");
- tmp += catchBy(el, "name");
- css = tmp + (css==""?"":(ie7?" > ":" ")) + css;
- el=el.parentNode;
- } catch (ex) {
- return css;
- }
- }
- times--;
- isCatched.value=false;
- }
- return css;
- }
-
- function addStyle(css) {
- alert(css);
- var s = document.createStyleSheet();
- s.cssText=css;
- }
-
- window.onload = function tryCatch() {
- var el = document.getElementById("catch")
- el.id="";
- document.getElementById( "result_IE7" ).innerText = catchByCss( el, true , 0 )
- document.getElementById( "result_IE6" ).innerText = catchByCss( el, false , 0 )
- document.getElementById( "result_IE7_safe" ).innerText = catchByCss( el, true , 0, true )
- document.getElementById( "result_IE6_safe" ).innerText = catchByCss( el, false , 0, true )
- }
- </script>
- </head>
- <body>
- <b>IE 6 (normal)</b> : <pre id="result_IE6" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
- <b>IE 6 (safe)</b> : <pre id="result_IE6_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
- <b>IE 7 (normal)</b> : <pre id="result_IE7" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
- <b>IE 7 (safe)</b> : <pre id="result_IE7_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
- <div id="content">
- <div class="adctner">
- <table name="table" id="catch">
- <tr>
- <td>
- <a href="#">
- <img width="200" height="200px" src="http://ads.mulhouse.free.fr/Images/logo%20ADS.JPG" />
- </a>
- </td>
- </tr>
- <tr><td style="font-size: 10px; text-align: right;">Ads by google</td></tr>
- </table>
- </div>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
- ContenuContenuContenuContenuContenuContenuContenuContenuContenu
- </div>
- </body>
- </html>
<!Doctype XHTML 1.1 dtd!>
<html>
<head>
<title>Catch by CSS</title>
<style>
pre { cursor: hand; display:inline; }
b { float: left; width: 100px; }
div.content { border: 1px; padding: 5px; }
div.adctner { float:left; }
a img { border-style: none }
</style>
<script type="text/javascript">
function catchByCss(el, ie7, times, safe) {
var isCatched = {value: false};
safe = !(safe);
ie7=(ie7 && document.compatMode!="BackCompat");
function isNullOrEmpty(o) {
return (
typeof (o) == "undefined" ||
o==null ||
o=="" ||
o==0
);
}
function catchBy(el, key) {
if (isNullOrEmpty(el[key])) {
return "";
}
switch (key) {
case "tagName":
if (el.tagName=="BODY" || el.tagName=="HTML" || isNullOrEmpty(el.parentNode) || el.parentNode==document) {
isCatched.value=true;
}
return el.tagName;
case "id":
if(el.id.indexOf(" ")==(-1)) {
isCatched.value=true;
return "#"+el.id;
}
if (ie7) {
isCatched.value=true;
return '[id="' + el.id + '"]';
}
return "";
case "className":
if (isCatched.value && String(el.id).indexOf(" ")!=(-1)) { return ""; }
if(el.className.indexOf(" ")==(-1)) {
isCatched.value=(safe && true);
return "."+el.className;
}
return "."+(el.className).replace(/(\s)+/g, ".")
case "name":
if (ie7) {
isCatched.value=(safe && true);
return '[name="' + el.name + '"]';
}
return "";
default: return "";
}
}
var css = "";
while (times > -1 || isNullOrEmpty(el)) {
while (!isCatched.value) {
try {
var tmp = "";
tmp += catchBy(el, "tagName");
tmp += catchBy(el, "id");
tmp += catchBy(el, "className");
tmp += catchBy(el, "name");
css = tmp + (css==""?"":(ie7?" > ":" ")) + css;
el=el.parentNode;
} catch (ex) {
return css;
}
}
times--;
isCatched.value=false;
}
return css;
}
function addStyle(css) {
alert(css);
var s = document.createStyleSheet();
s.cssText=css;
}
window.onload = function tryCatch() {
var el = document.getElementById("catch")
el.id="";
document.getElementById( "result_IE7" ).innerText = catchByCss( el, true , 0 )
document.getElementById( "result_IE6" ).innerText = catchByCss( el, false , 0 )
document.getElementById( "result_IE7_safe" ).innerText = catchByCss( el, true , 0, true )
document.getElementById( "result_IE6_safe" ).innerText = catchByCss( el, false , 0, true )
}
</script>
</head>
<body>
<b>IE 6 (normal)</b> : <pre id="result_IE6" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<b>IE 6 (safe)</b> : <pre id="result_IE6_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<b>IE 7 (normal)</b> : <pre id="result_IE7" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<b>IE 7 (safe)</b> : <pre id="result_IE7_safe" onclick="addStyle(this.innerText + ' { display: none }')"></pre><br/>
<div id="content">
<div class="adctner">
<table name="table" id="catch">
<tr>
<td>
<a href="#">
<img width="200" height="200px" src="http://ads.mulhouse.free.fr/Images/logo%20ADS.JPG" />
</a>
</td>
</tr>
<tr><td style="font-size: 10px; text-align: right;">Ads by google</td></tr>
</table>
</div>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu<br/>
ContenuContenuContenuContenuContenuContenuContenuContenuContenu
</div>
</body>
</html>
 Sources du même auteur
 Sources de la même categorie
Sources en rapport avec celle ci
 Commentaires et avis
 Discussions en rapport avec ce code source dans le forum
Ajouter une image dynamiquement sour Firfooxe [ par Fildomen ]
Salut !! encore un prob de compatibilité !!!j'ajoute des images a un iframe !! des smileys !! ca marche impec sous IE !! mais avec firefox !! il ajout
creer des onglet sans utiliser css [ par amaila ]
boujour à tous.je veux faire ajouter des onglets en javascript sans uitliser CSS.est il possible?si oui vous pouvez m'aider de trouver des exemples si
largeur de chaque element d'un menu horizontal en css [ par stopworries ]
Bonjour tlm!Voila g un menu horizontal en css et js qui fonctionne tres bien, le seul probleme, c que dans ma barre de menu, g par exple les titres "f
pb ie : ajouter un <option> à un <select> à partir d'une popup [ par yosh ]
Bon c assez compliqué mais je vai essayer d'être le plu clair possible J'ai une page dans laquel j'utilise la technologie AJAX couplé
Javascript chargé dynamiquement. [ par chmod777 ]
Bonjour à tous!mon problème est le suivant: lorsque je charge via une fonction AJAX le contenu d'une page html dans un div (genre mondiv.in
Ajouter une Option dans un Select [ par darb66 ]
Hello,J'ai un petit script qui fonctionne tres bien avec Internet Explorer, mais qui bug avec Firefox Mozilla. J'essaie d'ajouter et d'enlever des Opt
Pro des CSS dans le caca... [ par Analfabete ]
Bonjour à tous Je développe actuellement un site web le plus possible au standard actuel donc a fond dans les CSS.Cependant j'ai un petit pr
Déplacement d'un calque [ par Tilix ]
alut, j'ai trouvé ce script, permettant d'affiché un calque css quand la souris se trouve sur le lien Code : CSS <!-- a
Ajouter une multiplication à un total [ par jokef ]
J'ai créé (en m'inspirant de scripts trouvés ici et là) un tableau de commande de vin pour un vigneron suisse. Le calcul du montan
Ignorer attribut css [ par nashoy ]
Bonjour,J'ai une page index.css avec un certain nombre d'attributs, notamment:a:link, a:active, a:visited { color : black; text-decoration
|
 Téléchargements
Logiciels à télécharger sur le même thème :
Comparez les prix Nouvelle version
|