Question

我正在尝试在javascript中创建audio标记。

我有以下

  this.audioElement = createElement('audio', {className:'audio', src:'test.mp3', type:'audio/mpeg'});

我想要在html中显示的音频标签

<audio controls src='test.mp3' type='audio/mpeg'></audio>

我不确定如何在js中创建controls属性。任何人都可以帮我吗？谢谢！

Answer 1

现在明白了。

 this.audioElement = createElement('audio', {className:'audio-asset', src:'test.mp3'});
 this.audioElement.setAttribute('controls',true);

Answer 2

上面的答案对我来说似乎不起作用。这是我做的：

var audioElement;
audioElement = document.createElement('audio');
audioElement.setAttribute('controls', true);
audioElement.setAttribute('class', 'audio');
audioElement.setAttribute('src', 'test.mp3');
audioElement.setAttribute('type', 'audio/mpeg');

然后将audioElement附加到正文：

document.body.appendChild(audioElement);

Answer 3

为了实现这一点，你需要一个帮助函数createElement，其工作方式如下：

var createElement = function(type, props) {
    var $e = document.createElement(type);

    for (var prop in props) {
        $e.setAttribute(prop, props[prop]);
    }

    return $e;
}

现在你可以做到：

this.audioElement = createElement('audio', {className:'audio', src:'test.mp3', type:'audio/mpeg', controls: true});

Answer 4

我熟悉jQuery这样做。如果没有jQuery，我不知道该怎么做。

var $el = $('<audio>', {
    class: 'audio',
    src: 'test.mp3',
    type: 'audio/mpeg',
    controls: 'controls goes here'
});
var html = $el[0].outerHTML;

Answer 5

var audioElement = document.createElement('audio');

//your own code for setting the attributes you have already set

audioElement.controls=true;

对于multiple和disabled这样的布尔属性，只需将它们设置为true。

Answer 6

继@megawac 和 James 的回答之后，我认为对 modern browsers 上的多个属性执行此操作的最简洁方法可能是使用 Object.assign：

const colInput = document.createElement('input');
Object.assign(colInput,{
    type: 'number',
    min: 1,
    value: this.config.cols,
    onchange: this.updateSetting
});

仍然不是一个函数调用中的全部，但与这里的一些较旧的答案相比可读性强且不那么冗长。

Answer 7

启用控件

HTML

<button onclick="enableControls()" type="button">Enable controls</button>
<button onclick="disableControls()" type="button">Disable controls</button>
<button onclick="checkControls()" type="button">Check controls status</button>

JS

<script>
myVid=document.getElementById("audio1");
function enableControls()
  { 
  myVid.controls=true;
  myVid.load();
  } 
function disableControls()
  { 
  myVid.controls=false;
  myVid.load();
  } 
function checkControls()
  { 
  alert(myVid.controls);
  } 
</script>

如何在js中创建具有属性的元素？

7 个答案: