首页 文章

突出显示蓝色div的文本

提问于
浏览 次
0

我使用Angular2，我有一个div，我在显示几行文字 . 我在文本下方有一个按钮 . 当我点击它时，我想让div中的整个文本显示为选中状态（就像当你手动选择带有蓝色背景的文本区域时发生的那样 . 这是我的div：

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

我可以创建一个背景颜色为“蓝色”的类，并在单击按钮时应用于div，但这会使整个div变为蓝色 . 我想只显示背景为蓝色的文本部分（就像手动选择文本时那样）而不是整个div . 我怎样才能做到这一点？

html css angular typescript angular2-template

4 回答

  • 0
    .class {
    display:inline;
    background-color:green;
    color:#fff;
}

    <div class="class">Trump<br>Trump</div>
    回复于
  • 0

    在你的html文件中试试这个

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

    并在ts文件中添加此方法

    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);
        }
    }

    这应该工作，因为它将按预期选择特定的文本

    回复于
  • 0

    请获取以下代码 . 如果要查看正在运行的示例，请转到plunker链接 . 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;
            }
       } 
}
    回复于
  • -2

    您好，您可以使用JavaScript HTML DOM属性来执行此操作 .

    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>

    希望这对你有用 . 快乐编码:)

    回复于

相关问题