1. Zuhause
  2. Frage und Antwort
  3. Verwenden von JS zum Zeichnen einer horizontalen Regel

Verwenden von JS zum Zeichnen einer horizontalen Regel

2016-09-25 4 views
2

Dies könnte eine grundlegende Frage sein, aber wie erstellt man eine horizontale Linie (a.k.a horizontale Regel) in Javascript, ähnlich dem HTML-Tag <hr>? Ich möchte in der Lage sein, seine Farbe und Dicke genau so einzustellen, wie es mir der Tag <hr> erlaubt.Verwenden von JS zum Zeichnen einer horizontalen Regel

Ich habe eine Website, wo ich dies innerhalb eines <script> Tags (zusammen mit einigen begleitenden Code) tun muss. Ich kann <hr> nicht verwenden, da einige meiner Benutzer JS nicht aktiviert haben; Für sie wird also keiner der <script> Tag-Inhalte angezeigt, aber <hr> wird immer noch angezeigt (und ich möchte nicht, dass das passiert).

Quelle

2016-09-25 Sophia111

+2

Haben Sie darüber nachgedacht ein ''

mit einer CSS 'Display mit: none;' in einem ''
+0

@ AdamD.Ruppe: Entschuldigung, das ist mir eigentlich nicht bewusst. Könnten Sie das als Antwort hinzufügen? – Sophia111

+0

Ich antwortete mit ein paar Techniken in einer Probe. Generell versuche ich immer einfacher, einfacher HTML zu schreiben, die für funktioniert, was ich will, dann passen Sie es später mit Javascript, CSS oder NoScript Elemente, die die Sonderfälle abzudecken. Auf diese Weise tendieren sie dazu, lesbaren Quellcode und gute Kompatibilität zu liefern - grundlegendes HTML funktioniert für fast jeden! –

Antwort

1

das Problem angehen, zuerst:

ich nicht <hr> verwenden können, da einige meiner Benutzer aktiviert JS nicht haben; Für sie wird also keiner der <script> Tag-Inhalte angezeigt, aber <hr> wird immer noch angezeigt (und ich möchte nicht, dass das passiert).

Sie können eine Klasse zu Ihrem <html> Element in JavaScript (mit classList wenn Sie IE 9 Unterstützung nicht brauchen) hinzufügen:

document.documentElement.className += ' has-js';

dann stylen <hr> nicht angezeigt, wenn JavaScript unterstützt:

<hr class="hey-that’s-my-line" /> 

.hey-that’s-my-line { 
    display: none; 
    /* change its height & colour here */ 
} 

html.has-js .hey-that’s-my-line { 
    display: block; 
}

Nun, Ihre Frage zu beantworten: können Sie Elemente erstellen und i Fügen Sie sie mithilfe der DOM-API in Ihr Dokument ein. Es ist ein bisschen viel, um vollständig in dieser Antwort zu decken, aber MDN hat a good introduction.

var hr = document.createElement('hr'); 

document.body.appendChild(hr); // inserts it at the end of <body>; 
           // appendChild() inserts at the end of any node, 
           // generally 

var ref = document.getElementById('reference-point'); 

ref.parentNode.insertBefore(hr, ref); // inserts it before the element 
             // with the id 'reference-point'

Quelle

2016-09-25 02:47:48 Ryan

0

wenn Sie wollen nur ein HR-Element mit Hilfe von Javascript auf einer Seite erstellen, ist es wie folgt:

elem = document.createElement("hr"); //this will create a new element 

/* Use setAttribute to define the property and values you'd like give the element */ 

    elem.setAttribute("width", "100px"); 

/* Then you'll need to add the element to the page */ 

document.body.appendChild(elem);

Quelle

2016-09-25 02:50:22 boody

+0

Die Frage besagt, dass JS für einige Benutzer nicht verfügbar ist. – Brad

+0

@Ryan Ah, ich habe die Frage missverstanden. Vielen Dank. – Brad

0

Sie können mit einigen CSS ein Standard <hr> Element verwenden Sie es von noscript Benutzer zu verbergen.

Werfen Sie einen Blick auf: http://arsdnet.net/testo.html mit und ohne Javascript. Hier ist der Code:

<!DOCTYPE html> 
<html> 
<head> 
     <title>Noscript example</title> 
     <style> 
       /* this css is used by people with and without javascript */ 
       /* a <link> tag would work as well, of course */ 
     </style> 
     <noscript> 
       <style> 
         /* this is only visible by people without JS enabled */ 
         hr { 
           display: none; 
         } 
       </style> 
     </noscript> 
     <script> 
       /* And this script only runs with JS (obviously) so by adding 
        a class name to the root element (<html>), we can also detect 
        it in CSS.... 
       */ 
       document.documentElement.className += " with-js"; 
     </script> 
     <style> 
       /* ...meaning we can target it with CSS like this too: */ 
       html.with-js hr { 
         color: red; 
       } 
     </style> 
</head> 
<body> 
     Hi, before hr 
     <hr /> 
     After hr 
</body> 
</html>

Der <noscript> Tag gilt HTML von waaaaay zurück und funktioniert überall. Alles, was darin ist, ist nur für Leute ohne Skriptunterstützung sichtbar und es kann jeden Inhalt enthalten: Fallback-HTML, Link-Tags, Style-Tags, alles.

Indem ich ein style-Tag einfüge, kann ich CSS verwenden, um Elemente auszublenden, die nicht-Skript-Benutzer sehen sollen.

Also dann schreibe ich einfach normales HTML darunter, das normalerweise für alle Benutzer sichtbar sein wird - nichts besonderes dort. Dann, unter Verwendung der <noscript><style>, ändere ich es für Leute ohne Skript als Sonderfall.

Manchmal übrigens, möchten Sie nur Dinge zu Skript-Benutzer zeigen, anstatt nur die Dinge von Nicht-Benutzer zu verstecken. Der einfachste Weg, dies zu tun, ist eine Klasse auf Ihrem HTML-Element mit Javascript zu kleben, dann zielen Sie diese Klassennamen Nachkommen mit CSS. Die nächsten Zeilen im Beispiel zeigen das. Auch hier schreiben Sie normales HTML und modifizieren es danach, aber diesmal mit einer Kombination aus <script> zum Hinzufügen einer Klasse und <style>, um es zu targetieren.

So auf dieser Seite mit JS suchen, werden Sie einen roten hr sehen. Ohne JS wird die hr nicht angezeigt.

Quelle

2016-09-29 12:06:58

Verwandte Themen

 Verwandte Themen