Propriedade content do DOM HTML

Definição e uso

A propriedade content define onde o texto ou a imagem aparece (flutuante) dentro de outro elemento.

Sintaxe:

Object.style.content=value

Valores possíveis

Valor Descrição
string Define o conteúdo do texto.
url Define a URL.
  • counter(name)
  • counter(name, list-style-type)
  • counters(name, string)
  • counters(name, string, list-style-type)
 　
attr(X) Define as propriedades do seletor antes ou após o seletor especificado.
open-quote 　
close-quote 　
no-open-quote 　
no-close-quote 　

Dicas e notas:

Notas:Se houver pouco espaço em uma linha para os elementos flutuantes, esses elementos saltarão para a próxima linha, e este processo continuará até que haja uma linha com espaço suficiente.

Notas:O conteúdo, o fundo e as bordas dos elementos em linha devem aparecer antes dos elementos flutuantes. O fundo e as bordas dos elementos de bloco devem aparecer após os elementos flutuantes, mas o conteúdo dos elementos de bloco deve estar antes dos elementos flutuantes.

Exemplo

Este exemplo configura a imagem flutuando à esquerda:

<html>
<head>
<script type="text/javascript">
function setFloatLeft()
{
document.getElementById("img1").style.cssFloat="left";
}
</script>
</head>
<body>
<img id="img1" src="logocss.gif" width="95" height="84" />
<p>Este é algum texto. Este é algum texto. Este é algum texto.
Este é algum texto. Este é algum texto. Este é algum texto.
Este é algum texto. Este é algum texto. Este é algum texto.</p>
<form>
<input type="button" onclick="setFloatLeft()" value="Definir imagem para flutuar à esquerda" />
</form>
</body>
</html>

TIY

Configurar a imagem flutuando à esquerda do texto