Атрибут frameborder тега <iframe> — рамка фрейма
Атрибут frameborder вказує, чи слід відображати рамку навколо <iframe>.
Загальний опис
автор: NagarD
- Порада
-
Інколи краще не вказувати
автор: с3сframeborder, і використовувати CSS властивістьborder, щоб зробити рамку.
Синтаксис
<iframe frameborder="1|0"> Атрибут frameborder може отримувати 2 значень:
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 3 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 2 |
Приклади
+ запропонувати свій приклад у пісочниці
Чотири вбудовані рамки. Перша типова — з рамкою; друга з frameborder="0" — без неї; третя прибирає рамку через CSS. Четверта показує головне: у неї є frameborder="0", але правило CSS задає рамку — і атрибут програє.
HTML
<p>1. Типово — браузер малює вдавлену рамку:</p>
<iframe srcdoc="<p style='font:14px sans-serif;margin:6px'>Вбудований документ</p>"></iframe>
<p>2. <code>frameborder="0"</code> — рамки немає:</p>
<iframe frameborder="0" srcdoc="<p style='font:14px sans-serif;margin:6px'>Вбудований документ</p>"></iframe>
<p>3. Сучасний спосіб — <code>border: 0</code> у CSS:</p>
<iframe class="clean" srcdoc="<p style='font:14px sans-serif;margin:6px'>Вбудований документ</p>"></iframe>
<p>4. Тут є <code>frameborder="0"</code>, але рамку задає CSS — і атрибут програв:</p>
<iframe frameborder="0" class="framed" srcdoc="<p style='font:14px sans-serif;margin:6px'>Вбудований документ</p>"></iframe>CSS
p { margin: 0 0 8px; }
iframe { width: 260px; height: 60px; margin-bottom: 16px; }
.clean { border: 0; }
.framed { border: 3px solid teal; }
code { background: #f2f2f2; padding: 0 3px; }HTML
<p>У цьому прикладі, Ви можете змінювати значення для властивості frameborder</p>
<p id="text"></p>
Рамка присутня<input type = "radio" id="myButton" name = "myButton">
<br>
Рамка відсутня <input type = "radio" id="MyButton" name = "myButton"><br>
<hr>
<div class="block1">
<p> З використанням атрибута frameborder
</p>
<p class = "text" style ="color:#c500c5">
<iframe id="image" class="image" width="100" height="100" title="Рамка без облямівки" srcdoc="<p style='font:13px sans-serif;margin:4px'>Вміст рамки</p>" frameborder="0"></iframe>
<br>
</p>
</div>
<div class="block2">
<p> Без використанням атрибута frameborder
</p>
<p style ="color:#c500c5">
<iframe id="image2" width="100" height="100" title="Рамка з типовою облямівкою" srcdoc="<p style='font:13px sans-serif;margin:4px'>Вміст рамки</p>"></iframe>
</div>CSS
*{
text-align:center;
}
.block1{
float:left;
width:50%;
}JS
document.getElementById('myButton').onclick = function () {
document.getElementById('image').frameBorder = 1;
};
document.getElementById('MyButton').onclick = function () {
document.getElementById('image').frameBorder = 0;
};
//# sourceURL=pen.jsРізниця між HTML 4.01 та HTML5
Атрибут frameborder для тегу <iframe> не підтримується у HTML5. Використовуйте для цього CSS властивість border.
Коментарі
Коментарів ще немає — будьте першим!