Мне нужно установить непрозрачность объекта HTML <img src=""/> в JavaScript во всех браузерах.
В Firefox я делаю это с помощью строки:
imageobject.style.MozOpacity=opacity/100;
Каков правильный javascript-код для установки непрозрачности элемента в разных браузерах?
img.style.opacity = .5; //For real browsers;
img.style.filter = "alpha(opacity=50)"; //For IE;
Вам не нужно обнюхивать пользовательский агент, просто установите оба значения, поскольку браузеры будут игнорировать нерелевантный.
Там более одного способа обучить обезьяну.
Пример 1, установите атрибут стиля элементов, придающий непрозрачность 50% следующим образом:
<html>
<div style='opacity:.5'>this text has 50% opacity.
</div>
</html>
Пример 2, если вы захватите элемент с помощью document.getElementbyId, вы можете присвоить номер от 0 до 1 свойству style.opacity. Текст имеет значение 20% непрозрачности.
<html>
<div id="moo">the text</div>
<script type="text/javascript">
document.getElementById("moo").style.opacity=0.2;
</script>
</html>
Пример 3, сделайте селектор CSS, встроенный в HTML, который ссылается на класс вашего div. Текст в div является черным, но выглядит сероватым, потому что его непрозрачность составляет 50%.
<html>
<style>
.foobar{
opacity: .5;
}
</style>
<div class="foobar">This text is black but appears grey on screen</div>
</html>
Пример 4. Импорт jQuery. Сделайте пустой элемент div. Возьмите div с помощью jQuery и установите его содержимое html в элемент span, который устанавливает свою непрозрачность.
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<div></div>
<script type="text/javascript">
$("div").html("<span style='opacity:.7'>text is 70% opacity</span>");
</script>
</html>
Пример 5,
Импортировать jQuery. Дайте вашему div класс. Выберите элемент по его классу и установите его .css-свойство, передав первый параметр как непрозрачность, а второй параметр - числом от 0 до 1.
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<div class="foobar">the text</div>
<script type="text/javascript">
$(".foobar").css( "opacity", .5);
</script>
</html>
Пример 6. Задайте стиль вашего элемента для цвета rgba
<div style="color: rgba(0, 0, 0, .5)">
This text color is black, but opacity of 0.5 makes it look grey.
</div>
Пример 7. Используйте jQuery, чтобы браузер занимал 4 секунды, чтобы убрать элемент до непрозрачности 10%.
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<div class="foobar">the text</div>
<script type="text/javascript">
$(".foobar" ).fadeTo( 4000 , 0.1, function() {
alert("fade to 10% opacity complete");
});
</script>
</html>
Пример 8, используйте метод animate, чтобы сообщить jquery, что он занимает 5 секунд, чтобы изменить непрозрачность до 5%.
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js">
</script>
<div id="flapjack">the text</div>
<script type="text/javascript">
$('#flapjack').animate({ opacity: 0.05 }, 5000);
</script>
</html>
Статус обезьяны: школьный;
Вам не нужно использовать префиксы, специфичные для поставщика, или обнаружение браузера...
Просто установите opacity. Firefox, Chrome и Safari поддерживали простую opacity на некоторое время, а IE9 и поддержку поддерживают opacity. filter работает в IE.
В chrome вы просто установите imgobject.style.opacity=0.5; в IE imgobject.style.filter='alpha(opacity=50)'.