调用一个 html 元素并在 JavaScript 中操作它答案

【问题标题】：Call an html element and manipulate it in JavaScript调用一个 html 元素并在 JavaScript 中操作它
【发布时间】：2016-07-28 05:08:56
【问题描述】：

我是网络开发新手，正在尝试实现文件上传区域网格。

我正在为我正在构建的网站使用DropZone.js。我已经格式化了 DropZone 并在 html 中创建了额外的 DropZone。我有四行四行，创建一个网格。这些中的每一个都在 JavaScript 中调用相同的父级。每个区域内都有一条默认消息，上面写着：

“将文件放到此处上传”

我想改变它。事实上，我希望每个实例都有单独的描述。此网格中的每个区域都有唯一的描述。

我想知道的是，我该怎么做呢？

我已包含网站的 html、dropzone.js 的 .js 和 .css。

我能否在 JavaScript 中调用 html 中的元素并让它从 javascript 中操作 dictDefaultMessage: "Drop files here to upload", 以创建与被调用元素相关的新文本？

dropzones 都调用同一个父级，我不想制作 16 个不同的 dropzone.js 来完成这项工作。

我是 Web 开发的新手，非常感谢您提供深入的解释。

谢谢。

Dropzone.prototype.defaultOptions = {
      url: null,
      method: "post",
      withCredentials: false,
      parallelUploads: 2,
      uploadMultiple: false,
      maxFilesize: 256,
      paramName: "file",
      createImageThumbnails: true,
      maxThumbnailFilesize: 10,
      thumbnailWidth: 120,
      thumbnailHeight: 120,
      filesizeBase: 1000,
      maxFiles: null,
      params: {},
      clickable: true,
      ignoreHiddenFiles: true,
      acceptedFiles: null,
      acceptedMimeTypes: null,
      autoProcessQueue: true,
      autoQueue: true,
      addRemoveLinks: false,
      previewsContainer: null,
      hiddenInputContainer: "body",
      capture: null,
      renameFilename: null,
      dictDefaultMessage: "Drop files here to upload",
      dictFallbackMessage: "Your browser does not support drag'n'drop file uploads.",
      dictFallbackText: "Please use the fallback form below to upload your files like in the olden days.",
      dictFileTooBig: "File is too big ({{filesize}}MiB). Max filesize: {{maxFilesize}}MiB.",
      dictInvalidFileType: "You can't upload files of this type.",
      dictResponseError: "Server responded with {{statusCode}} code.",
      dictCancelUpload: "Cancel upload",
      dictCancelUploadConfirmation: "Are you sure you want to cancel this upload?",
      dictRemoveFile: "Remove file",
      dictRemoveFileConfirmation: null,
      dictMaxFilesExceeded: "You can not upload any more files.",
      accept: function(file, done) {
        return done();
      },

<title>Zone #16</title>

    <script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script>
    <link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css">
    <p style="color:rgb(4,0,84)" align="center"> Drop your file in the appropriate zone. There are 16 zones to choose from </p>
    <!-- Change /upload-target to your upload address -->
    <form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>


    <title>Zone #</title>

    <script src="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.js"></script>
    <link rel="stylesheet" href="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI/dropzone-4.3.0/dist/dropzone.css">
    <!-- Change /upload-target to your upload address -->
    <form action="/home/dan/Documents/YNGWork/Projects/FRANK/WebPage/DragDropWebUI" class="dropzone"></form>

【问题讨论】：

Documentation 说“如果你根本不想要默认消息......你可以在你的 dropzone 元素中放置一个带有 dz-message 类的元素，并且 dropzone 不会为你创建消息。”这可能有助于为每个区域指定自定义消息。

标签： javascript jquery html css node.js

【解决方案1】：

首先，您只需要在标题中包含一次脚本和样式表。只要确保将脚本放在标题中，它是with async。

HTML

<head>
<!-- Stylesheet goes here -->
<!-- Script goes here -->
</head>

现在，您需要为每个表单指定一个唯一的 ID。这将使您的 JavaScript 知道哪个 ID 应该获取哪个框。

HTML

<form action="" class="dropzone" id="zone16"></form>

最后，要给每个区域一个唯一的名称，您只需更改dictDefaultMessage。

你这样做：

JavaScript

Dropzone.options.zone16 {
    dictDefaultMessage: "This is the sixteenth zone!"
}

【讨论】：

【解决方案2】：

defaultValues 更像是设置默认值的配置备份。

您可以在 javascript 中操作 html(DOM) 对象

首先你必须得到你的对象。

//Via Id
var obj = document.getElementById("EnterIdHere");
//Via Class
var obj = document.getElementByClassName("EnterClassNameHere"); //unsure for correct spelling

接下来您可以访问 DOM-Object 并对其进行操作。

var obj = document.getElementById("divExample");

obj.style.backgroundColor = "green"; //Do a CSS action

obj.classList.toggle("Crap", false); //Disable CSS-Class Crap

obj.innerHTML = "New Content"; //Labeling it

基础教程：http://callmenick.com/post/basics-javascript-dom-manipulation

【讨论】：