JavaScript非表单元素的属性操作方式

JavaScript可以用来操作非表单元素的属性，包括元素的样式、内容、属性等。

以下是一些常见的非表单元素属性操作方式的代码示例：

1. 操作元素样式（style）属性：

// 获取元素
var element = document.getElementById('myElement');

// 修改元素的样式
element.style.color = 'blue';
element.style.fontSize = '14px';

2. 操作元素内容（innerHTML）属性：

// 获取元素
var element = document.getElementById('myElement');

// 修改元素的内容
element.innerHTML = '新的内容';

3. 操作元素属性（setAttribute和getAttribute）：

// 获取元素
var element = document.getElementById('myElement');

// 设置元素属性
element.setAttribute('data-value', '123');
element.setAttribute('class', 'my-class');

// 获取元素属性
var value = element.getAttribute('data-value');

4. 操作元素自定义属性（dataset）：

// 获取元素
var element = document.getElementById('myElement');

// 设置元素自定义属性
element.dataset.name = 'John';
element.dataset.age = '25';

// 获取元素自定义属性
var name = element.dataset.name;
var age = element.dataset.age;

以上是一些常见的非表单元素属性操作方式的代码示例，根据具体的需求和场景，可以选择对应的操作方式来修改和获取元素的属性。

以下是针对href、title、id和src等常见非表单元素属性的操作方式代码示例及使用方法：

1. href属性操作（适用于链接元素）：

// 获取链接元素
var link = document.getElementById('myLink');

// 获取href属性的值
var hrefValue = link.href;

// 设置href属性的值
link.href = 'https://www.example.com';

2. title属性操作（适用于大多数元素）：

// 获取元素
var element = document.getElementById('myElement');

// 获取title属性的值
var titleValue = element.title;

// 设置title属性的值
element.title = '新的标题';

3. id属性操作（适用于大多数元素）：

// 获取元素
var element = document.getElementById('myElement');

// 获取id属性的值
var idValue = element.id;

// 设置id属性的值
element.id = 'newId';

4. src属性操作（适用于图片和视频等元素）：

// 获取图片或视频元素
var media = document.getElementById('myMedia');

// 获取src属性的值
var srcValue = media.src;

// 设置src属性的值
media.src = 'new-media.jpg';

以上示例展示了如何使用JavaScript操作非表单元素的href、title、id和src属性。根据需要，可以使用相应的属性访问或修改元素的属性值。记得在操作元素属性之前，使用document.getElementById()或其他方式获取元素的引用。