Two ways to change css style in native js
Below I will introduce to you two ways to change CSS styles in native js:
1Through the node in the javascript code. style.cssText="css expression 1; css expression 2; css expression 3 " directly changes the CSS style.
2First set the style for a specific class such as the "active class" in the CSS style sheet (the active class here is assumed and does not exist for the time being), and then in the javascript code Through node.classname="active", the style setting of the active class in the CSS style sheet is attached to the node node.
The following is a detailed introduction, first is the html code:
<style type="text/css">
p {
float: left;
padding: 20px;
margin: 10px;
border: 1px solid #000;
background-color: #fff;
color: #000;
}
.active
{
background-color:blue
}
</style>
<body>
<p class="root">
</p>
</body> is just a simple p, the running result is 
First use the above The first way to change the css style is to write the following javascript code:
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.style.cssText="background-color: blue;color: #fff;";
</script>The running result is:
Then use the second method mentioned above To change the css style, write the following javascript code:
<script type="text/javascript">
var root=document.getElementsByClassName("root")[0];
root.className="active";
</script>The same running result is:
Summary: The results of these two methods are the same, but As far as the operation process is concerned, the second method, which is the "node.classname" method, separates the writing of css and js, which is obviously more reasonable and orderly. If the css statement is relatively simple, there is no difference between the two methods, but if the css statement is relatively complex, obviously the second method is more methodical.
The above is the detailed content of Two ways to change css style in native js. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
How to use the filter property in CSS
Aug 11, 2025 pm 05:29 PM
TheCSSfilterpropertyallowsvisualeffectslikeblur,brightness,andgrayscaletobeapplieddirectlytoHTMLelements.1)Usethesyntaxfilter:filter-function(value)toapplyeffects.2)Combinemultiplefilterswithspaceseparation,e.g.,blur(2px)brightness(70%).3)Commonfunct
How to change the list style in CSS
Aug 17, 2025 am 10:04 AM
To change the CSS list style, first use list-style-type to change the bullet or numbering style. 1. Use list-style-type to set the bullet of ul to disc, circle or square, and the number of ol is decimal, lower-alpha, upper-alpha, lower-roman or upper-roman. 2. Remove the tag completely with list-style:none. 3. Use list-style-image:url('bullet.png') to replace it with a custom image. 4. Use list-style-position:in
How to create a vertical line with CSS
Aug 11, 2025 pm 12:49 PM
Use a div with border to quickly create vertical lines, and define styles and heights by setting border-left and height; 2. Use ::before or ::after pseudo-elements to add vertical lines without additional HTML tags, suitable for decorative separation; 3. In Flexbox layout, by setting the width and background color of the divider class, adaptive vertical dividers between elastic containers can be achieved; 4. In CSSGrid, insert vertical lines as independent columns (such as autowidth columns) into grid layout, which is suitable for responsive design; the most appropriate method should be selected according to the specific layout needs to ensure that the structure is simple and easy to maintain.
How to create a dotted border in CSS
Aug 15, 2025 am 04:56 AM
Use CSS to create dotted borders, just set the border attribute to dotted. For example, "border:3pxdotted#000" can add a 3-pixel-wide black dot border to the element. By adjusting the border-width, the size of the point can be changed. The wider borders produce larger points. You can set dotted borders for a certain side, such as "border-top:2pxdottedred". Dotted borders are suitable for block-level elements such as div and input. They are often used in focus states or editable areas to improve accessibility. Pay attention to color contrast. At the same time, different from dashed's short-line style, dotted presents a circular dot shape. This feature is widely used in all mainstream browsers.
How to create a responsive testimonial slider with CSS
Aug 12, 2025 am 09:42 AM
It is feasible to create a responsive automatic carousel slider with pure CSS, just combine HTML structure, Flexbox layout, and CSS animation. 2. First build a semantic HTML container containing multiple recommendation terms, each .item contains reference content and author information. 3. Use the parent container to set display:flex, width:300% (three slides) and apply overflow:hidden to achieve horizontal arrangement. 4. Use @keyframes to define a translateX transformation from 0% to -100%, and combine animation: scroll15slinearinfinite to achieve seamless automatic scrolling. 5. Add media
How to change the cursor in CSS
Aug 16, 2025 am 05:00 AM
Usebuilt-incursortypeslikepointer,help,ornot-allowedtoprovideimmediatevisualfeedbackfordifferentinteractiveelements.2.ApplycustomcursorimageswiththecursorpropertyusingaURL,optionallyspecifyingahotspotandalwaysincludingafallbacklikeautoorpointer.3.Fol
How to create a split-screen layout with CSS
Aug 11, 2025 pm 10:59 PM
Using CSS to create a split screen layout can be implemented through Flexbox. First, set the container to display:flex and set the height to 100vh. Use flex:1 to divide the space evenly. The horizontal layout is only possible by default. Vertical layout needs to be set flex-direction:column. In conjunction with media query @media(max-width:768px) can achieve the mobile stacking responsive effect. If you need to fix the sidebar, set a fixed width for it. The main content area uses flex:1 to adapt to the remaining space. At the same time, it is recommended to use box-sizing:border-box globally to avoid padding affecting the layout, and ultimately achieve a simple and responsive split screen design.
css :nth-child() selector example
Aug 11, 2025 pm 11:22 PM
:nth-child() is used to select and style the elements according to the position of the elements in the same level, and is often used to create alternating styles or specific modes; 1. Use the even and odd keywords to achieve interlaced color changes, such as li:nth-child(even) to set the background of even items to light gray; 2. Use the an b formula to accurately control the selection rules, such as 3n 1 to select items 1, 4, 7, etc.; 3. Special modes such as -n 3 to select the first 3 child elements; 4. Note that nth-child counts from 1 and calculates all elements of the same level. If you need to count only by the same element, use nth-of-type().
