Skip to content

Attributes and properties #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@
<div data-widget-name="menu">Choose the genre</div>

<script>
// getting it
// trovalo
let elem = document.querySelector('[data-widget-name]');

// reading the value
// leggi il valore
alert(elem.dataset.widgetName);
// or
// oppure
alert(elem.getAttribute('data-widget-name'));
</script>
</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 5

---

# Get the attribute
# Trova l'attributo

Write the code to select the element with `data-widget-name` attribute from the document and to read its value.
Scrivi il codice per selezionare e leggere il valore degli elementi del documento con l'attributo `data-widget-name`.

```html run
<!DOCTYPE html>
Expand All @@ -14,7 +14,7 @@ Write the code to select the element with `data-widget-name` attribute from the
<div data-widget-name="menu">Choose the genre</div>

<script>
/* your code */
/* il tuo codice */
</script>
</body>
</html>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

First, we need to find all external references.
Prima di tutto, dobbiamo trovare tutte le referenze esterne.

There are two ways.
Ci sono due modi.

The first is to find all links using `document.querySelectorAll('a')` and then filter out what we need:
Il primo è quello di trovare tutti i link utilizzando `document.querySelectorAll('a')` e poi filtrare quelli che ci servono:

```js
let links = document.querySelectorAll('a');
Expand All @@ -12,23 +12,23 @@ for (let link of links) {
*!*
let href = link.getAttribute('href');
*/!*
if (!href) continue; // no attribute
if (!href) continue; // nessun attributo

if (!href.includes('://')) continue; // no protocol
if (!href.includes('://')) continue; // nessun protocollo

if (href.startsWith('http://internal.com')) continue; // internal
if (href.startsWith('http://internal.com')) continue; // interno

link.style.color = 'orange';
}
```

Please note: we use `link.getAttribute('href')`. Not `link.href`, because we need the value from HTML.
Nota: utilizziamo `link.getAttribute('href')`, non `link.href`, perché abbiamo bisogno del valore dall'HTML.

...Another, simpler way would be to add the checks to CSS selector:
...Un'altra, più semplice alternativa sarebbe aggiungere dei controlli ai selettori CSS:

```js
// look for all links that have :// in href
// but href doesn't start with http://internal.com
// cerca tutti i link che hanno :// in href
// ma href non inizia con http://internal.com
let selector = 'a[href*="://"]:not([href^="http://internal.com"])';
let links = document.querySelectorAll(selector);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ importance: 3

---

# Make external links orange
# Rendi tutti i link esterni arancioni

Make all external links orange by altering their `style` property.
Rendi tutti i link esterni arancioni modificandone la proprietà `style`.

A link is external if:
- Its `href` has `://` in it
- But doesn't start with `http://internal.com`.
Un link è esterno se:
- Il suo `href` ha `://`
- Ma non comincia con `http://internal.com`.

Example:
Esempio:

```html run
<a name="list">the list</a>
Expand All @@ -24,12 +24,12 @@ Example:
</ul>

<script>
// setting style for a single link
// imposta lo stile per un singolo link
let link = document.querySelector('a');
link.style.color = 'orange';
</script>
```

The result should be:
Il risultato dovrebbe essere:

[iframe border=1 height=180 src="solution"]
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy