What are the uses of dynamic addition, display and hiding of css style
This article introduces the use of dynamic addition, display and hiding of css style. The content is very detailed. Interested friends can use it for reference. I hope it will be helpful to you.
Dynamic addition of styles:
(in which the red font is a statement that dynamically adds styles), this is a function that dynamically generates an unordered list, which is used to display the searched wifi signal, which has three parameters, the name of wifi, encryption method, and signal strength.
The code is as follows:
/ / create a network list item function newListItem (network, averageSignalStrength) {/ * A Wi-Fi list item has the following HTML structure: * * "signalStrength" + dbm * Network Security * Network SSID * * / / ssid var _ = navigator.mozL10n.get; var ssid = document.createElement ('a'); ssid.textContent = network.ssid; var div = document.createElement ('div'); var str_css = "position: absolute;left: 50%; right: 3remt; top: 45% Padding-top: 0.4rem.font-size: 1.4rem.color: # 505859; pointer-events: none; "; div.style = str_css; if (! averageSignalStrength) div.textContent = 'strength:'+ network.signalStrength +' dbm'; else div.textContent = 'strength:'+ averageSignalStrength +' dbm'; / / supported authentication methods var small = document.createElement ('small'); var keys = network.capabilities If (keys & & keys.length) {small.textContent = _ 'securedBy', {capabilities: keys.join (',')}; small.textContent = keys.join (',');} else {small.textContent = _ ('securityOpen'); small.dataset.l10nId =' securityOpen';} / / create list item var li = document.createElement ('li'); li.appendChild (div); li.appendChild (small); li.appendChild (ssid); return li;}
Display and hiding of styles:
Traversal tag exp = document.getElementById ("exp")
Hide the tag exp.style.display = "none"
Display the label exp.style.display = "list-item"
The Padding attribute defines the space between the element border and the element content.
The padding shorthand property sets all the inner margins properties in a declaration. Sets all current or specified element inner margin attributes. This property can have 1 to 4 values
The code is as follows:
Grammatical structure padding-top:20px; upper inner margin padding-right:30px; right inner margin padding-bottom:30px; lower inner margin padding-left:20px Left inner margin padding:1p four sides unified inner margin padding:1px1px, left and right inner margin padding:1px1px1px, left and right, lower inner margin padding:1px1px1px1px upper, right, lower, left inner margin on the dynamic addition of css style and the use of show and hide which are shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.
