CSS für das Targeting des variablen ID-Namens

Lesezeit: 11 Minuten

Benutzer-Avatar
Rick

Ich verwende WordPress und habe eine Diashow von meiner Smugmug-Seite.

Die Diashow zeigt eine Cookie-Benachrichtigung, die ich ausblenden möchte. Das Problem ist, dass die id -Attribut ist zufällig, mit Ausnahme des ersten und letzten Zeichens (beginnend mit yui_ und mit _32 Am Ende. Die Klasse ist konstant, aber ihre Verwendung hat keinen Einfluss auf die Anzeige der Cookie-Warnung. Es gibt ein dynamisch geladenes Javascript, das auch als Teil der eingebetteten Diashow ausgeführt wird. Ich weiß nicht, ob dies einen Unterschied für die Fähigkeit von lokalem CSS macht, den Code zu ändern.

HTML:

<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_32"> = $0
            “ FYI: This site uses cookies to make sure your visit is as awesome as possible.  “
           <a class"headermessagelink"="" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
      <div class="sm-eu-cookie-close">
      <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
      </button>
</div>
</div>

Ich habe Stunden damit verbracht, erfolglos nach einer Antwort zu suchen.

Wie kann ich das ganze ausblenden <div> Element mit CSS?

BEARBEITEN: Ich hätte erwähnen sollen, dass ich keine Kontrolle über den Server habe, von dem der eingebettete Code bereitgestellt wird, und die meisten der oben genannten Kodierungen werden dynamisch generiert, wenn die Seite geladen wird. Ich kann nur das lokale CSS in meinem WordPress-Design und das Design-CSS in meinen von Smugmug gehosteten Galerien bearbeiten (aber ich glaube nicht, dass sich dies auf die Diashow auswirkt, die in externen Einbettungen angezeigt wird). Die Seite ist https://light/touch.photography/ wenn Sie den Seitencode so sehen möchten, wie er dem Benutzer präsentiert wird.

  • Warum wählen Sie das div nicht anhand seiner Klasse (von der ich annehme, dass sie konsistent ist und mit nichts geteilt wird) anstelle seiner ID aus? .sm-eu-cookie-message {display: none;}

    – Shea Hunter Belsky

    10. November 2016 um 4:27 Uhr

  • Vielen Dank. Ich habe es sowohl mit dem WordPress-CSS als auch mit dem Smugmug-CSS nach Klassen versucht, aber es macht keinen Unterschied. Da die Diashow als eingebetteter Code ausgeführt wird, gehe ich davon aus, dass die CSS-Änderung auf der WordPress-Seite erfolgen müsste, aber ich habe beides ausprobiert, nur für den Fall.

    – Rick

    10. November 2016 um 15:03 Uhr

Benutzer-Avatar
Ricky

CSS-Ansatz

Wenn die Klasse der Cookie-Benachrichtigung konsistent ist, können Sie Folgendes verwenden:

.sm-eu-cookie-message{
  display: none; /* If it is persistent, use the !important flag. */
}

Oder mit !important Flagge:

.sm-eu-cookie-message{
  display: none!important; 
}

Wenn die Klasse nicht konsistent ist, aber das Attribut id Werte sind, können Sie die verwenden ^ oder $ Substring-Matching-Attributselektoren.

  • [attribute^=value] Wählt jedes Element aus, bei dem das Attribut mit dem angegebenen Wert beginnt.
  • [attribute$=value] Wählt jedes Element aus, bei dem das Attribut mit dem angegebenen Wert endet.
[id^=yui_],
[id^=yui_ i] {  /* match attribute values case-insensitively */
  color: red;
  /*display: none;*/
}
[id$=_32] {
  color: blue;
  /*display: none;*/
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

Um mehr Boden abzudecken, können Sie auch die verwenden * Substring-Matching-Attribut-Selektor.

  • [attribute*=value] Wählt jedes Element aus, bei dem das Attribut mindestens eine Instanz des angegebenen Werts enthält.
[id^=yui_],
[id^=yui_ i],  /* match attribute values case-insensitively */
[id*=yui_],
[id*=yui_ i]{  /* match attribute values case-insensitively */
  color: red;
  /*display: none;*/
}
[id$=_32],
[id*=_32]{
  color: blue;
  /*display: none;*/
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

Weitere Informationen zu diesen Selektoren hierQuelle W3C.

Denken Sie daran, dass diese Benachrichtigung von einer externen Quelle stammt und sich plötzlich vollständig ändern kann, wodurch die vorherigen Selektoren unbrauchbar werden und aktualisiert werden müssen.

BEARBEITEN:

JS-Ansatz

Dies erfordert jQuery Bibliothek.

Sie haben zwei Möglichkeiten:

  1. Erstellen Sie manuell eine jQuery-Mehrfachselektor und verwenden remove().
  2. Verwenden Sie eine Funktion, um dies für Sie zu tun.

1) Erstellen Sie manuell einen jQuery-Mehrfachselektor:

$(document).ready(function() {

  $("[id^=yui_], [id$=_32], [id*=yui_], [id*=_32], [id^=yui_ i], [id$=_32 i], [id*=yui_ i], [id*=_32 i], [id^=yui_][id$=_32], [id^=yui_ i][id$=_32 i]").remove();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

2. Verwenden Sie eine Funktion, um dies für Sie zu tun.

$(document).ready(function() {

  // Summary: Removes an element from the DOM by substring matching attribute selectors.
  // Params: att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith
  function removeByAttSubstring(att, beginsWith, endsWith, bContains, bCaseInsensitive, bBeginsAndEndsWith) {

    // Assign string variables for each selector that we want to create
    var sBw = att + "^=" + beginsWith,
      sEw = att + "$=" + endsWith,
      sCbw = att + "*=" + beginsWith,
      sCew = att + "*=" + endsWith;

    // Create an array of the string selectors
    var aSelectors = [sBw, sEw, sCbw, sCew];

    // If boolean case insensitive equals true, add those strings as well
    if (bCaseInsensitive === true) {
      var sBwCi = att + "^=" + beginsWith + " i",
        sEwCi = att + "$=" + endsWith + " i",
        sCbwCi = att + "*=" + beginsWith + " i",
        sCewCi = att + "*=" + endsWith + " i";
      aSelectors.push(sBwCi, sEwCi, sCbwCi, sCewCi);
    }

    // If boolean stack attributes equals true, combine the strings
    if (bBeginsAndEndsWith === true) {
      var sBwaew = sBw + "][" + sEw;
      aSelectors.push(sBwaew);
    }

    // If booleans case insensitive and stack attributes equals true, combine the case insensitive strings 
    if (bCaseInsensitive === true && bBeginsAndEndsWith === true) {
      var sBwaewCi = sBw + " i][" + sEw + " i";
      aSelectors.push(sBwaewCi);
    }

    // For each string in the array, construct the attribute selector.
    for (var i = 0; i < aSelectors.length; i++) {
      aSelectors[i] = "[" + aSelectors[i] + "]";
    }
    // Format the jQuery Multiple Selector
    var sSelectors = aSelectors.join(", ");

    // Illustration purposes only
    console.log("Attribute Selectors: " + sSelectors);

    // Remove the elements, if matched, entirely from the DOM
    $(sSelectors).remove();

  }

  // Initialize function
  removeByAttSubstring("id", "yui_", "_32", true, true, true);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute ends with <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="yUI_3_8_0_1_1478749888956_changedfordemo">
  Id attribute starts with <em>yUI_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_1_1478749888956_32">
  Id attribute containing an instance of <em>_32</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yui_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yui_</em>
</div>

<div class="sm-eu-cookie-message" id="changedfordemo_3_8_0_yUI_1478749888956_changedfordemo">
  Id attribute containing an instance of <em>yUI_</em>
</div>

Parameter:

  1. att – (Typ: Zeichenkette) Das Attribut, das Sie abgleichen möchten.
  2. beginsWith – (Typ: Zeichenkette) Der Wert, mit dem der Attributwert beginnt.
  3. endsWith – (Typ: Zeichenkette) Der Wert, mit dem der Attributwert endet.
  4. bContains – (Typ: boolesch) Wenn wahr, verwenden Sie die * Substring-Matching-Attributselektor für beide beginsWith und endsWith Variablen, indem neue Selektoren erstellt werden (es ersetzt sie nicht, es fügt neue hinzu).
  5. bCaseInsensitive – (Typ: boolesch) Wenn wahr, fügen Sie neue Selektoren hinzu, verwenden Sie jedoch das Flag, bei dem die Groß-/Kleinschreibung nicht berücksichtigt wird i.
  6. bBeginsAndEndsWith – (Typ: boolesch) Wenn wahr, Attributselektoren stapeln. (Wenn bCaseInsensitive stimmt, es fügt einen weiteren gestapelten Selektor hinzu, bei dem die Groß-/Kleinschreibung ebenfalls nicht berücksichtigt wird).

Beispiel:

  removeByAttSubstring("id", "yui_", "_32", true, true, true);

jsFiddle

Anmerkungen:

  • Die CSS-Attributselektoren ohne Berücksichtigung der Groß-/Kleinschreibung sind Level 4sollten Sie die Browserunterstützung überprüfen hier. Sie sind in der Demo enthalten, um mehr Boden abzudecken, aber sie funktionieren möglicherweise nicht in einigen Browsern. Deshalb behalten wir auch die Groß- und Kleinschreibung bei.

  • Wow, es sieht nach einer Menge Arbeit aus, das zu schreiben, danke. Ich bin mir jedoch nicht sicher, wie ich es auf der Website implementieren soll, dh was wohin gehört und wie ich es in WordPress erreichen kann. Da der Code für die eingebettete Diashow von einer Remote-Quelle aufgerufen wird (der gesamte Code und mehr, den ich in die ursprüngliche Frage kopiert habe), denke ich, dass die zweite Option diejenige wäre, die ich ausprobieren sollte, aber ich verstehe nicht welche Bits gehen wo auf der Seite.

    – Rick

    10. November 2016 um 22:47 Uhr

  • @Rick Der JS-Ansatz muss in einer Javascript-Datei enthalten sein (Verlängerung .js), und es sollte nach dem verwiesen werden jQuery Bibliothek … Erstellen Sie eine neue JS-Datei, fügen Sie den Javascript-Teil meiner Antwort dort ein und verweisen Sie dann in Ihrer HTML-Datei mit a <script> -Tag, platzieren Sie es unter dem Rest der <script> Tag-Referenzen.

    – Ricky

    10. November 2016 um 22:52 Uhr

  • Exzellent. Vielen Dank noch mal. werde ich morgen ausprobieren 🙂

    – Rick

    10. November 2016 um 22:55 Uhr

  • Ich habe versucht, das Javascript über ein Plugin (CSS & Javascript Toolbox) hinzuzufügen, kann es aber nicht zum Laufen bringen. Der Code wird in der Seitenquelle angezeigt, entfernt jedoch nicht die Cookie-Warnung. Außerdem zeigt das Fenster “Element prüfen” eine Warnung, dass “$ keine Funktion ist. (In ‘$(document)’ ist ‘$’ undefiniert)”.

    – Rick

    11. November 2016 um 23:57 Uhr

  • jQuery wird überhaupt nicht oder nicht referenziert Vor Ihre Javascript-Datei.

    – Ricky

    12. November 2016 um 0:35 Uhr

Schön und einfach: Attributselektoren stapeln. Ich habe auch die hinzugefügt !important denn wenn dieser HTML-Code von einem Plugin stammt, ist es wahrscheinlich, dass bereits CSS verfügbar ist. Mit !important Sie erzwingen die Verwendung Ihres CSS, es sei denn, die andere Partei verwendet einen noch spezifischeren Selektor mit !important. Wenn sie CSS mit JavaScript überschreiben, müssen Sie selbst auf eine JS-Lösung zurückgreifen.

div[id^="yui_"][id$="_32"] {
  display: none!important;
}
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_1478235091986_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_14782349638956_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_32">= $0 “ FYI: This site uses cookies to make sure your visit is as awesome as possible. “
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>
<div class="sm-eu-cookie-message" id="yui_3_8_0_1_147834534532_33">NOT HIDDEN
  <a class="headermessagelink" target="_blank" href="http://help.smugmug.com/customer/portal/articles/93251">What and why?</a>
  <div class="sm-eu-cookie-close">
    <button type="button" class="sm-button sm-button-size-small sm-button-skin-default sm-button-nochrome">
      <span class="sm-fonticon sm-button-fonticon sm-fonticon-small sm-fonticon-XCross"></span>
    </button>
  </div>
</div>

  • Vielen Dank. Ich habe das CSS ausprobiert, aber das HTML wird beim Laden der Seite dynamisch geschrieben. Es scheint, dass der Stil tatsächlich im Javascript geschrieben ist. Da ich keine Javascript-Kenntnisse habe, muss ich mich wohl geschlagen geben 🙁

    – Rick

    10. November 2016 um 15:29 Uhr

1372580cookie-checkCSS für das Targeting des variablen ID-Namens

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy

Contact - Terms and Conditions - Privacy Policy