How to add custom style css and change the text color & text size through JavaScript in lightning web component – LWC

[vijayk3327]

In this post we are going to learn about How to add custom style css and change the text color & text size through JavaScript in lightning web component – LWC.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : lwcApplyCss.html

`

Easy to learn Step-by-Step online tutorial from www.w3web.net

Hi welcome to online tutorial www.w3web.net

w3web.net is the place where you can learn step-by-step about Blog, WordPress, Salesforce Lightning Component, Lightning Web Component (LWC), Visualforce, Technical of Computer Application, Salesforce Plugin, JavaScript, Jquery, CSS, Computer & Accessories, Software Configuration, Customization, Development and much more…

</lightning-card>

`

Step 2:- Create Lightning Web Component : lwcApplyCss.js

` import { LightningElement } from 'lwc';

export default class LwcApplyCss extends LightningElement {

renderedCallback(){
	this.template.querySelector("h1").style.color="blue";
    this.template.querySelector("h1").style.textAlign="center";
    this.template.querySelector("h1").style.fontSize="16px";
    this.template.querySelector(".containerOver").style.boxShadow="0px 0px 5px #0007ea";
            this.template.querySelectorAll(".listItem").forEach(item=>{
            Object.assign(item.style, {color:'green',textAlign:'center',fontSize:'15px'});
    }); 

}

customStyleChange(event){
this.template.querySelector("h1").style.fontSize="22px";
this.template.querySelector("h1").innerHTML="Easy to learn LWC tutorial from w3web.net";
this.template.querySelector(".containerOver").style.boxShadow="0px 0px 5px #ff0000";
this.template.querySelectorAll(".listItem").forEach(item=>{
Object.assign(item.style, {color:'red',textAlign:'center',fontSize:'18px'});
});
}

}`

Step 3:- Create Lightning Web Component : lwcApplyCss.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> <target>lightning__Tab</target> </targets> </LightningComponentBundle>

Step 4:- Create Lightning Application : lwcApp.app

<aura:application extends="force:slds"> <c:lwcApplyCss/> </aura:application>

→ Get source code live demo link:-