Rumah hujung hadapan web tutorial css 如何HTML标签和JS中设置CSS3 var变量

如何HTML标签和JS中设置CSS3 var变量

Nov 27, 2018 pm 05:10 PM
teg html


本篇文章给大家带来的内容是关于如何HTML标签和JS中设置CSS3 var变量,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、HTML标签中设置CSS变量

如下:

<div style="--color: #cd0000;">
<img src="mm.jpg" style="border: 10px solid var(--color);">
</div>
Salin selepas log masuk

直接正常CSS语句一样在style属性中设置即可。

效果如下截图:

2018-11-16_221537.png

二、JS中设置CSS变量

如下,HTML示意:

如果要想让var(--color)生效,执行下面JavaScript代码即可:

box.style.setProperty('--color', '#cd0000');

也就是使用setProperty()方法,效果如下GIF截屏示意:

js-set-var.gif

三、JS中获取CSS变量

JS中获取CSS变量可以使用getPropertyValue()方法,示意:

// 获取 --color CSS 变量值
var cssVarColor = getComputedStyle(box)。getPropertyValue(&#39;--color&#39;);
// 输出cssVarColor
// 输出变量值是:#cd0000
console.log(cssVarColor);
Salin selepas log masuk

四、关于CSS3 var()变量

CSS3 var()变量是个好东西,2年前介绍的时候还没多少浏览器支持,现在,Edge16也已经完全支持了。

2018-11-27_001109.png

以上就是对如何HTML标签和JS中设置CSS3 var变量的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。



Atas ialah kandungan terperinci 如何HTML标签和JS中设置CSS3 var变量. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengalih keluar tag HTML menggunakan ungkapan biasa Python Bagaimana untuk mengalih keluar tag HTML menggunakan ungkapan biasa Python Jun 22, 2023 am 08:44 AM

HTML (HyperTextMarkupLanguage) ialah bahasa standard untuk mencipta halaman Web Ia menggunakan tag dan atribut untuk menerangkan pelbagai elemen pada halaman, seperti teks, imej, jadual, pautan, dll. Walau bagaimanapun, apabila memproses teks HTML, sukar untuk mengekstrak kandungan teks dengan cepat untuk pemprosesan seterusnya. Pada masa ini, kita boleh menggunakan ungkapan biasa dalam Python untuk mengalih keluar teg HTML untuk mengekstrak teks biasa dengan cepat. Dalam Python, jadual biasa

Cara mengekstrak kandungan teg HTML menggunakan ungkapan biasa dalam bahasa Go Cara mengekstrak kandungan teg HTML menggunakan ungkapan biasa dalam bahasa Go Jul 14, 2023 pm 01:18 PM

Cara menggunakan ungkapan biasa untuk mengekstrak kandungan teg HTML dalam bahasa Go Pengenalan: Ungkapan biasa ialah alat padanan teks yang berkuasa dan ia juga digunakan secara meluas dalam bahasa Go. Dalam senario pemprosesan teg HTML, ungkapan biasa boleh membantu kami mengekstrak kandungan yang diperlukan dengan cepat. Artikel ini akan memperkenalkan cara menggunakan ungkapan biasa untuk mengekstrak kandungan teg HTML dalam bahasa Go dan memberikan contoh kod yang berkaitan. 1. Memperkenalkan pakej berkaitan Pertama, kita perlu mengimport pakej berkaitan: regexp dan fmt. pakej regexp menyediakan

Bagaimana untuk mengalih keluar tag HTML daripada rentetan dalam PHP? Bagaimana untuk mengalih keluar tag HTML daripada rentetan dalam PHP? Mar 23, 2024 pm 09:03 PM

PHP ialah bahasa skrip sebelah pelayan yang biasa digunakan yang digunakan secara meluas dalam pembangunan laman web dan pembangunan aplikasi back-end. Apabila membangunkan tapak web atau aplikasi, anda sering menghadapi situasi di mana anda perlu memproses tag HTML dalam rentetan. Artikel ini akan memperkenalkan cara menggunakan PHP untuk mengalih keluar tag HTML daripada rentetan dan memberikan contoh kod khusus. Mengapa anda perlu mengalih keluar tag HTML? Tag HTML selalunya disertakan semasa memproses input pengguna atau teks yang diperoleh daripada pangkalan data. Kadangkala kami ingin mengalih keluar tag HTML ini apabila memaparkan teks

php中怎么转义html标签 php中怎么转义html标签 Feb 24, 2021 pm 06:00 PM

在PHP中,可以使用htmlentities()函数来转义html,能把字符转换为HTML实体,语法“htmlentities(string,flags,character-set,double_encode)”。PHP中也可以使用html_entity_decode()函数来反转义html,把HTML实体转换为字符。

Bagaimana untuk mengalih keluar tag HTML daripada rentetan yang diberikan dalam Java? Bagaimana untuk mengalih keluar tag HTML daripada rentetan yang diberikan dalam Java? Aug 29, 2023 pm 06:05 PM

String ialah kelas akhir dalam Java, ia tidak boleh diubah, yang bermaksud kita tidak boleh menukar objek itu sendiri, tetapi kita boleh menukar rujukan objek. Teg HTML boleh dialih keluar daripada rentetan yang diberikan menggunakan kaedah replaceAll() kelas String. Kami boleh mengalih keluar teg HTML daripada rentetan yang diberikan menggunakan ungkapan biasa. Selepas mengalih keluar tag HTML daripada rentetan, ia mengembalikan rentetan sebagai teks biasa. Contoh sintaks publicStringreplaceAll(Stringregex,Stringreplacement) publicclassRemoveHTMLTagsTest{&nbs

Bagaimana untuk menggunakan tag HTML dalam jadual HTML? Bagaimana untuk menggunakan tag HTML dalam jadual HTML? Sep 08, 2023 pm 06:13 PM

Kita boleh dengan mudah menambah tag HTML dalam jadual. Teg HTML hendaklah diletakkan di dalam teg <td>. Contohnya, tambahkan perenggan <p>…</p> teg atau teg lain yang tersedia di dalam teg <td>. Sintaks Berikut ialah sintaks untuk menggunakan tag HTMl dalam jadual HTML. <td><p>Paragraphofthecontext</p><td>Contoh 1 Contoh penggunaan tag HTML dalam jadual HTML diberikan di bawah. <!DOCTYPEhtml><html><head&g

Kaedah ungkapan biasa PHP untuk mengesahkan tag HTML asas Kaedah ungkapan biasa PHP untuk mengesahkan tag HTML asas Jun 24, 2023 am 08:07 AM

PHP ialah bahasa pembangunan web yang cekap yang menyokong fungsi ekspresi biasa dan boleh mengesahkan kesahihan data input dengan cepat. Dalam pembangunan web, HTML ialah bahasa penanda biasa, dan pengesahan teg HTML ialah kaedah yang sangat penting untuk pengesahan borang web. Artikel ini akan memperkenalkan kaedah pengesahan teg HTML asas dan cara menggunakan ungkapan biasa PHP untuk pengesahan. 1. Struktur asas tag HTML Tag HTML terdiri daripada nama elemen dan atribut yang dikelilingi oleh kurungan sudut Tag biasa termasuk p, a, div

Koleksi lengkap tag HTML Koleksi lengkap tag HTML Nov 27, 2023 am 10:05 AM

HTML标签有<!DOCTYPE>、<html>、<head>、<tajuk>、<meta>、<pautan>、<style>、<skrip>、<body>、<h1> - <h6>、<p >、<a>、<img>、<div>、<span>、<input>、<butang>、<borang

See all articles