Art ein bestimmtes Bild

Sagen wir, ich hatte so etwas wie eine der folgenden Aktionen:Art ein bestimmtes Bild

<img src="image001.jpg"> 
<img src="../image001.jpg"> 
<img src="http://localhost/image001.jpg">

Verwendung von JavaScript (kein jQuery und keine CSS bitte), ist es möglich, das Bild (er) in Frage, von außen nach Stil des Tags.

Zum Beispiel, wenn ich eine Website habe und ich Google Chrome Inspect> Konsole verwende, könnte ich einen Stil für ein Bild festlegen? Etwas wie:

var images = document.querySelectorAll("img"); 

for(var i = 0;i < images.length;i++){ 
    var image = images[i].src; 
    if (image.indexOf('mystring') !== -1) { 
    console.log(image); 

}

Quelle

2016-12-17 pee2pee

Sie können bearbeiten Stile in der Konsole leben. Darüber hinaus ist es wirklich unklar, was Sie fragen. Ist das eine Site, die du kontrollierst ... oder nur eine Site, die du benutzt? – charlietfl

Was meinen Sie mit "außerhalb des Tags "? – PiotrK

Klicken Sie einfach auf das Panel "Elemente" - klicken Sie auf das Bild, das Sie wollen - im rechten Feld ändern Sie den Stil wie Sie wollen! –

Verwendung von JavaScript (nicht jQuery oder CSS), ist es möglich, das Bild stylen (e) [...]?

Ja, absolut:

var images = document.getElementsByTagName('img'); 
 

 
images[0].style.backgroundColor = 'rgb(255,0,0)'; 
 
images[1].style.backgroundColor = 'rgb(255,255,0)'; 
 
images[2].style.backgroundColor = 'rgb(0,0,255)'; 
 

 
for (var i = 0; i < images.length; i++) { 
 
    images[i].style.width = '100px'; 
 
    images[i].style.height = '100px'; 
 
}

<img src="image001.jpg"> 
 
<img src="../image001.jpg"> 
 
<img src="http://localhost/image001.jpg">

Quelle

2016-12-17 21:57:39 Rounin

Ganz nah - wie würde ich den Dateinamen speziell anvisieren? – pee2pee

Genau wie bei 'src' können Sie auch' document.querySelectorAll ('img [src * = "image001.jpg"]') ' – casraf

Wenn ich verstehen Sie richtig ..

Wenn Sie ein erstes Attribut auf das Bild aufbauen möchten, können Sie Legen Sie einen Stil für das Bild fest oder erstellen Sie einen Stil, der auf alle Ihre Bilder angewendet werden soll. In diesem Beispiel möchten wir einen 2-Pixel-Rahmen mit abgerundeten Ecken haben.

ein Class-Attribut wie dies dem Bild Ihrer HTML-Datei hinzufügen:

<img src="http://localhost/image001.jpg" class="your-class">

"your-Klasse" ist die Klasse, die Sie erstellen Name es, was Sie wollen.

Erstellen Sie die Klasse entweder zwischen Style-Tags in HTML-Datei wie folgt aus:

<style> 
.your-class { 
    border: 2px; 
    border-radius: 20px; 
} 
</style>

oder Sie den Stil in einer separaten CSS-Datei (ohne den Style-Tag) und verweisen Sie im Kopf-Tag setzen können Ihre hTML-Datei wie folgt:

<link rel="stylesheet" type="text/css" href="/css/styles.css"/>

CSS vorausgesetzt, ist eine Datei „styles.css“ genannt und ist in einem CSS-Ordner enthalten in Ihrer Site root-Verzeichnis.

Bearbeitet: Nicht die Antwort, die das OP suchte, aber redigierte, um zusätzliche Details für jedermann einzuschließen, das auf diesem landet.

Quelle

2016-12-17 22:01:28

Willkommen bei Stack Overflow verwenden. Ich denke, Ihr Vorschlag ist, was @pee2pee sucht zum. Sie könnten ein wenig weiter gehen und erklären, wie die Seite das von Ihnen zur Verfügung gestellte CSS verwenden wird, entweder mit Seitenstilen oder als externe CSS-Datei. Sie können Ihren Beitrag bearbeiten, um diesen einzuschließen und Ihre Antwort vollständiger zu machen. – Mikkel

Entschuldigung nein, das ist das Erstellen eines bestimmten CSS und das Ändern des ursprünglichen Codes. Dies könnte für jede Website sein, die ich in der Theorie besuche. – pee2pee

können Sie diesrcjedes<img>Element als Selektor in CSS verwenden.

Sie können dann Stil dieses spezifische Bildohne etwas im HTML-Code zu ändern.

Arbeitsbeispiel:

body { 
 
    text-align: center 
 
} 
 
img { 
 
    margin: 0 auto; 
 
} 
 
img[src="http://placehold.it/350x149"] { 
 
    border: 10px solid black 
 
} 
 
img[src="http://placehold.it/350x150"] { 
 
    border: 10px solid red 
 
} 
 
img[src="http://placehold.it/350x151"] { 
 
    border: 10px solid blue 
 
}

<body> 
 
    <img src="http://placehold.it/350x149"> 
 
    <img src="http://placehold.it/350x150"> 
 
    <img src="http://placehold.it/350x151"> 
 
</body>

Quelle

2016-12-18 08:09:56

Das verwendet CSS, das ich nicht verwenden wollte – pee2pee

Mein Schlechter, ich muss die Anfrage missverstanden haben, da es sich anhört, als ob Sie entweder JavaScript oder CSS, aber nicht jQuery wollen –

var images = document.querySelectorAll("img"); 

    for(var i = 0;i < images.length;i++){ 
     var image = images[i]; 
     var imageSrc = images[i].src; 
     if (imageSrc.indexOf("a") !== -1) { 
     console.log(image); 
     images[i].style.width = '500px'; 
     images[i].style.height = '500px'; 
     images[i].style.zIndex = '9999999999999999999999999'; 
     images[i].style.border = '20px solid red'; 
     } 
    }

Quelle

2016-12-18 08:15:36 pee2pee

Art ein bestimmtes Bild

Antwort

Verwandte Themen