調用html元素並使用JavaScript進行操作

我是web開發新手，正在嘗試實現文件上傳區域的網格。調用html元素並使用JavaScript進行操作

我使用DropZone.js一個網站我建立。我已經格式化了DropZone並在html中創建了額外的DropZones。我有四個四行，創建一個網格。這些中的每一個都在JavaScript中調用同一個父代。裏面每個區域是說，一個默認消息：

「文件拖放這裏上傳」

我想改變這一點。實際上我希望每個實例都有一個單獨的描述。此網格中的每個區域都有唯一的描述。

我想知道的是，我該如何去做這件事？

我已經包括了dropzone.js該網站的HTML中，的.js和.css。

我可以從JavaScript中的HTML調用元素，並讓它從JavaScript處理dictDefaultMessage: "Drop files here to upload",來創建與被調用的元素相關的新文本？

的dropzones都調用同一個父母，我不想做十六個不同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>

所有的

來源

2016-07-27 Yah_DANIMAL

[文件]（http://www.dropzonejs.com/#tips）說：「如果你不想默認的消息都沒有。 ..你可以將一個元素放入你的dropzone元素中，類爲'dz-message'，並且dropzone不會爲你創建消息。「這對於爲每個區域指定自定義消息可能會有所幫助。 – showdev

首先，你只需要包括腳本和樣式表頭一次。只要確保你把腳本放在標題中，它就是with async。

HTML

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

現在，每一個你的表格，你需要給他們一種獨特的ID.This將讓你的JavaScript知道哪個ID應該得到哪個箱子。

HTML

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

最後，爲了使每個區域唯一的名稱，你只需要改變dictDefaultMessage。

你這樣做，像這樣：

的JavaScript

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

來源

2016-07-27 21:08:24

這根本不起作用。 –

defaultValues更貌似設置默認值恢復配置的備份。

你可以操縱的JavaScript

首先你必須讓你的對象HTML（DOM）對象。

接下來，您可以訪問DOM的對象，並對其進行操作。

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

來源

2016-07-27 21:08:56 COOLGAMETUBE

調用html元素並使用JavaScript進行操作

回答

相關問題