当前位置：首页 > JavaScript

js实现选中

2026-03-14 02:57:50JavaScript

选中文本内容

使用 window.getSelection() 方法获取当前选中的文本内容。以下代码示例展示如何获取选中的文本：

function getSelectedText() {
  return window.getSelection().toString();
}

// 示例：监听鼠标抬起事件获取选中文本
document.addEventListener('mouseup', function() {
  const selectedText = getSelectedText();
  if (selectedText) {
    console.log('选中文本:', selectedText);
  }
});

选中DOM元素

通过 document.querySelector 或 document.getElementById 等方法选中DOM元素：

js实现选中

// 通过ID选中元素
const elementById = document.getElementById('elementId');

// 通过CSS选择器选中元素
const elementBySelector = document.querySelector('.className');

选中表单元素值

获取表单元素（如input、textarea）的选中值：

const inputElement = document.querySelector('input[type="text"]');
console.log('输入框的值:', inputElement.value);

// 对于单选按钮或复选框
const checkbox = document.querySelector('input[type="checkbox"]');
console.log('复选框状态:', checkbox.checked);

选中多个元素

使用 document.querySelectorAll 选中多个元素并遍历：

js实现选中

const allButtons = document.querySelectorAll('button');
allButtons.forEach(button => {
  button.addEventListener('click', () => {
    console.log('按钮被点击:', button.textContent);
  });
});

选中并操作样式

通过 classList 或直接修改 style 属性操作选中元素的样式：

const targetElement = document.querySelector('.target');
// 添加类
targetElement.classList.add('highlight');

// 直接修改样式
targetElement.style.backgroundColor = 'yellow';

选中并修改属性

使用 setAttribute 或直接属性访问修改选中元素的属性：

const imageElement = document.querySelector('img');
// 修改src属性
imageElement.src = 'new-image.jpg';

// 使用setAttribute
imageElement.setAttribute('alt', '新图片描述');

标签: js