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

What can TypeScript do with high-level type functions?

Using CSS3 gradient in grey instead of white

Is it possible to obtain Literal types for object keys dynamically in typescript?

Modify the td attributes while retaining the extracted data values from the website

I am looking to have the datepicker automatically clear when the reset button is clicked

Using Jquery to loop through a function for every select box that is added dynamically

Having difficulty passing a function as a parameter from a NextJS component

Having difficulty aligning ListItem to the right within a List

Modifying the color of an empty string is not feasible in Javascript

Resolve the issue pertaining to the x-axis in D3 JS and enhance the y-axis and x-axis by implementing dashed lines

What could be causing ESLint to run on its own configuration file while working with Typescript?

When working with Angular and evaluating code, I encounter an issue related to the environment that

Having trouble applying [formControl] to a set of radio buttons in Angular2

The JS copy function is successful when operating on a single element, but it encounters issues when attempting to run on multiple elements, only copying

Getting Started with CSS Alignment - A Novice's Guide

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Using a single Angular component to dynamically load data based on the query string

Issue with AnimeJS Motion Path causing element to deviate from desired SVG path

Display line numbers in HTML/CSS cellsorIncor

Leveraging Angular CLI in conjunction with the newest AspNetCore Angular 4 Single Page Application template