Атрибут type тега <script> — тип вмісту скрипта
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<script type="MIME-тип">...</script>Атрибут type може отримувати 2 значень:
-
text/javascript -
Для мови програмування JavaScript.
автор: с3с -
text/vbscript -
Для мови програмування VBScript.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Найпростіший приклад використання атрибута <type> тегу <style>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Тег SCRIPT, атрибут type</title>
<script type = "text/java-source"></script>
</head>
<body>Чотири блоки <script> із типами, які браузер НЕ вважає JavaScript, — тому на цій сторінці не виконується жоден рядок коду. Звичайно такі блоки невидимі; тут їх показано правилом script { display: block }, а вердикт після типу домальовує CSS за атрибутом. Найкраще видно на другому блоці: усередині лежить справжня розмітка, і вона лишається текстом, а не перетворюється на заголовок і кнопку.
HTML
<p class="lbl">Нижче — самі теґи script, показані як текст:</p>
<script type="text/plain">
Цей рядок ніколи не стане кодом: тип не є типом JavaScript.
</script>
<script type="text/template">
<h2>Заголовок із шаблону</h2>
<button>Кнопка, якої не існує</button>
</script>
<script type="application/json">
{ "misto": "Львів", "rik": 1256 }
</script>
<script type="text/javascript;charset=utf-8">
А ось найпідступніший випадок: тип майже правильний, а блок мовчить.
</script>
<p class="why">Порівняння суворе, цілим рядком: параметр після крапки з комою
робить значення іншим. Працюють лише «text/javascript»,
«application/javascript», порожнє значення й повна відсутність атрибута —
регістр при цьому не має значення.</p>CSS
.lbl {
margin: 0 0 10px;
font-weight: 600;
}
script {
display: block;
max-width: 560px;
margin: 0 0 12px;
padding: 8px 10px;
border-left: 6px solid #d64545;
background: #f7f8fa;
color: #333;
font: 14px/1.5 ui-monospace, monospace;
white-space: pre-wrap;
}
script::before {
content: "type=\"" attr(type) "\" — не виконується";
display: block;
margin-bottom: 4px;
color: #d64545;
font-weight: 700;
}
script[type="application/json"] {
border-left-color: #2f6fd0;
}
script[type="application/json"]::before {
content: "type=\"application/json\" — не код, а дані в сторінці";
color: #2f6fd0;
}
script[type="text/template"] {
border-left-color: #3a9a4f;
}
script[type="text/template"]::before {
content: "type=\"text/template\" — розмітка лишається текстом";
color: #3a9a4f;
}
.why {
max-width: 560px;
color: #5a6472;
font-size: .9em;
}Коментарі
Коментарів ще немає — будьте першим!