Menu
I'm inspecting https://ionicframework.com/docs/api/alert alert..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alert</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script type="module">
import { alertController } from 'https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/index.esm.js';
window.alertController = alertController;
</script>
</head>
<body>
<ion-app>
<ion-header translucent>
<ion-toolbar>
<ion-title>Alert</ion-title>
</ion-toolbar>
</ion-header>,
<ion-content fullscreen class="ion-padding">
<ion-alert-controller></ion-alert-controller>
<ion-button expand="block">Show Alert</ion-button>
</ion-content>
</ion-app>
<script>
const button = document.querySelector('ion-button');
button.addEventListener('click', handleButtonClick);
async function handleButtonClick() {
const alert = await alertController.create({
header: 'Use this lightsaber?',
message: 'Do you agree to use this lightsaber to do good across the galaxy?',
buttons: ['Disagree', 'Agree']
});
await alert.present();
}
</script>
</body>
</html>There is an element there with .alert-wrapper class on it.
if you'll look at the applied CSS, it will show you opacity: 0, but the computed shows opacity: 1
I tried removing all the CSS Files from the page, all the javascript, all the other elements I tried to move this element to the body (outside the iframe) and applying the opacity: 0 in the styles, nothing helps, the computed stays opacity: 1..
How is this possible?
854
The opacity property in CSS specifies how transparent an element is. Opacity has a default initial value of 1 (100% opaque). Opacity is not inherited, but because the parent has opacity that applies to everything within it.
The computed style is the style used on the element after all styling sources have been applied. Style sources: external and internal style sheets, inherited styles, and browser default styles.
To set or copy JavaScript computed style from one element to another, we can loop through each style and call the setProperty method to set the styles on the target element. to add a div and a section element. We define the copyNode function that takes the sourceNode and targetNode .
The opacity in CSS is the property of an element that describes the transparency of the element. It is the opposite of transparency & represents the degree to which the content will be hidden behind an element. We can apply the opacity with different styling properties to the elements.
You aren't allowed to write to the styles returned by getComputedStyle if they were computed by the browser (ie not set by JavaScript already or by a CSS file). Instead of list.setProperty ('opacity', '0'), use scrollList.style.opacity = "0" or add an opacity rule to the .list selector in your CSS.
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well.
A <number> in the range 0.0 to 1.0, inclusive, or a <percentage> in the range 0% to 100%, inclusive, representing the opacity of the channel (that is, the value of its alpha channel). Any value outside the interval, though valid, is clamped to the nearest limit in the range. The element is fully transparent (that is, invisible).
They are using the Web Animations API.
elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});#elem {
opacity: 0;
}<div id="elem">Hello</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
