Make the text stand out by highlighting it within a div using a striking blue

Question

Make the text stand out by highlighting it within a div using a striking blue

Currently, I am working with Angular2 and have incorporated a div element to display multiple lines of text. Positioned below the text is a button that, when clicked, should select the entirety of the text within the div (similar to selecting text manually where it becomes highlighted in blue). Below is a snippet of my HTML:

<div #ins class="xyz" innerHTML="{{ 'sometext' | translate }}"></div>

I've attempted creating a CSS class with a background-color property set to 'blue' and applying it to the entire div upon clicking the button. However, this approach results in the entire div turning blue. My goal is to only highlight the text portion with a blue background, just as it appears when selected manually. Is there a way to achieve this effect?

html css angular typescript angular2-template

Answer 1

Answer №1

.style {
    display:block;
    background-color:blue;
    color:#000;
}

<div class="style">Biden<br>Biden</div>

Answer 2

.style {
    display:block;
    background-color:blue;
    color:#000;
}

<div class="style">Biden<br>Biden</div>

Answer 3

Answer №2

Consider implementing this code snippet into your HTML document:

 <div #ins id="selectedTextId" class="xyz" innerHTML="{{ 'sometext lorem ipsum' }}"></div>
 <button (click)="selectText('selectedTextId')">select</button>

Additionally, don't forget to include this method in your TypeScript file:

 private selectText(selectedElemntId):void {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(selectedElemntId));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(selectedElemntId));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
        }
    }

By following these instructions, you should achieve the desired result of selecting specific text on your web page.

Answer 4

Consider implementing this code snippet into your HTML document:

 <div #ins id="selectedTextId" class="xyz" innerHTML="{{ 'sometext lorem ipsum' }}"></div>
 <button (click)="selectText('selectedTextId')">select</button>

Additionally, don't forget to include this method in your TypeScript file:

 private selectText(selectedElemntId):void {
        if (document.selection) {
            var range = document.body.createTextRange();
            range.moveToElementText(document.getElementById(selectedElemntId));
            range.select();
        } else if (window.getSelection) {
            var range = document.createRange();
            range.selectNode(document.getElementById(selectedElemntId));
            window.getSelection().removeAllRanges();
            window.getSelection().addRange(range);
        }
    }

By following these instructions, you should achieve the desired result of selecting specific text on your web page.

Answer 5

Answer №3

Kindly find the code snippet provided below. For a live demonstration, you can visit the following Plunker link: Demo

@Component({  
   selector: 'my-app',
   template: `
    <div [ngClass]="{'yellowclass':selectedtext== true}">
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
    </div>
    <div (click)="selectedText()"> Click here</div>   `, 
}) 

export class App {  
       name:string;  
       constructor() {
            this.name = `Angular! v${VERSION.full}`
      } 
      selectedtext:boolean =false;
      selectedText(){
            if(this.selectedtext==false){
               this.selectedtext= true;
            }else{
               this.selectedtext= false;
            }
       } 
}

Answer 6

Kindly find the code snippet provided below. For a live demonstration, you can visit the following Plunker link: Demo

@Component({  
   selector: 'my-app',
   template: `
    <div [ngClass]="{'yellowclass':selectedtext== true}">
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
      <h2>Hello {{name}}</h2>
    </div>
    <div (click)="selectedText()"> Click here</div>   `, 
}) 

export class App {  
       name:string;  
       constructor() {
            this.name = `Angular! v${VERSION.full}`
      } 
      selectedtext:boolean =false;
      selectedText(){
            if(this.selectedtext==false){
               this.selectedtext= true;
            }else{
               this.selectedtext= false;
            }
       } 
}

Answer 7

Answer №4

If you want to change the color of an element using JavaScript HTML DOM property, you can easily achieve it with this code:

function changeColor(){
document.getElementById("paragraph").style.background = "blue";
}

<html>
<body>

<h1 id="paragraph">This is a Heading</h1>
<button onClick="changeColor()">ChangeColor</button>
</body>
</html>

Give it a try and see if it works for your needs. Happy coding!

Answer 8

If you want to change the color of an element using JavaScript HTML DOM property, you can easily achieve it with this code:

function changeColor(){
document.getElementById("paragraph").style.background = "blue";
}

<html>
<body>

<h1 id="paragraph">This is a Heading</h1>
<button onClick="changeColor()">ChangeColor</button>
</body>
</html>

Give it a try and see if it works for your needs. Happy coding!

Make the text stand out by highlighting it within a div using a striking blue

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for creating a typescript module definition that exports a module dependency as one of its members

What is causing my css elements to appear larger compared to other instances?

Encountering an Issue: "ng new" Command Throws Error Upon Creating Angular Project

What is causing me to not receive a 404 error when dealing with an unhandled state?

Tips for configuring Angular 2 to send all requests in the form of application/x-www-form-urlencoded

The file uploader on the HTML page only allows for PNG files to be uploaded

Achieve a seamless integration of a navbar and list on the same line by utilizing the power of Bootstrap

Display an AJAX div when the image is hovered over and have it track the movement of

The width of an HTML input and button elements do not match

Tips for applying a class to two elements when a checkbox is clicked and avoiding duplicated URL strings

Is it possible for Typescript to resolve a json file?

Utilization of z-index with float: left within an image gallery in CSS

Height problem with the data-reactroot component

Unable to fetch the data from HTML input field using autocomplete feature of jQuery UI

Unlimited requests sent to the server while subscribing to an observable on HTTP

When a condition fails, the default style in the CSS media query does not apply

What is the best way to forward all URLs to one central page?

What are the benefits of reverting back to an Angular 1 directive instead of using an Angular 2 application

Display issue with React TypeScript select field

Restrict HTML Elements Based on Their Size