不透明度的應用 CSS 規則與計算樣式不同
[英]applied CSS rule for opacity is different from the computed styles
問題描述
我正在檢查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>
那里有一個帶有 .alert-wrapper 類的元素。
如果您查看應用的 CSS，它會顯示 opacity: 0，但計算結果顯示 opacity: 1
我嘗試從頁面中刪除所有 CSS 文件、所有 javascript、所有其他元素，我嘗試將此元素移動到正文（iframe 外）並應用 opacity: 0 在樣式中，沒有任何幫助，計算保持不透明度: 1..
這怎么可能？
2 個解決方案
解決方案1
5 2020-09-20 04:10:53
他們正在使用Web Animations API 。
elem.animate([{ opacity: "1" }],{duration: 1, iterations: 1, fill: "forwards"});
#elem { opacity: 0; }
<div id="elem">Hello</div>
解決方案2
0 2020-09-20 04:16:49
我想您已經知道這一點，但您是否嘗試過使用 - !important
opacity 的初始值是 - 1.0 Inherited - no Computed value -> 指定值，裁剪在 [0,1] 范圍內
來源 - MDN
如何返回外部樣式表類應用於元素的所有CSS屬性（而不是計算樣式！）？
[英]How do I return all CSS properties applied to an element by an external stylesheet class (not get computed styles!)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.