軟件開發過程中,可以使用以下代碼來獲取到 body 標簽中的內容:
document.body.innerHTML
但上述方式無法獲取到諸如 head、html 等 body 標簽之外的元素內容。如果需要獲取整個網頁上完整的 html 內容,可以使用以下 JavaScript 代碼:
document.documentElement.outerHTML
在 CefSharp 中,可以通過 ChromiumWebBrowser 類型的 GetSourceAsync 方法獲取網頁的源代碼。該方法返回的字符串包含 html 標簽,但不包含通過 JavaScript 動態渲染出的內容。
如果想獲取包含動態渲染的內容(比如采集場景下),可以通過運行 JavaScript 代碼的方式實現:
前一段時間,小編也收集了推薦36種免費React模板和主題「干貨」,這次又收集了22種Vue的。希望小伙們喜歡。收集不易,希望點贊+關注。
在Internet上搜索模板和主題時,很難找到免費的Vue資源。
即使您不在乎質量,它們似乎也很難被發現,并出于好奇而感動,我花了數小時在Google和Github上四處挖掘,結果得到了收集22種開源Vue模板和主題框架集合。我不會對此打賭,但是它們也是高質量的資源。
現場演示:https://bootstrap-vue.org/
github:https://github.com/bootstrap-vue/bootstrap-vue
BootstrapVue 擁有85個以上的組件,45個以上的可用插件,多個指令和670+個圖標, 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網格系統的最全面的實現之一 ,并具有廣泛的功能和自動 WAI-ARIA 可訪問性標記。
現場演示:https://surmon.me/
Github: https://github.com/surmon-china/surmon.me
使用vue & nuxt 搭建建立的非常有風味獨特的博客網站。
現場演示:https://buefy.org/
Github: https://github.com/buefy/buefy/
Buefy 是基于Bulma框架和設計的Vue.js響應式UI組件的輕量級庫
特征
現場演示:https://vue.ant.design
Github: https://github.com/vueComponent/ant-design-vue
這里是 Ant Design 的 Vue 實現,開發和服務于企業級后臺產品。
特性
現場演示:官網:vuetifyjs.com
Github:https://github.com/vuetifyjs/vuetify
Vuetify 是一個 Vue UI 庫,包含手工制作的精美材料組件。不需要設計技能 - 創建令人驚嘆的應用程序所需的一切都觸手可及。
iview官網:https://www.iviewui.com/
Github:https://github.com/iview/iview
官方后臺示例:iview-admin:https://github.com/iview/iview-admin
iView Admin是一個前端管理后臺集成解決方案。它基于Vue.js并使用UI Toolkit iView。
Vue:http://element-cn.eleme.io/2.0/#/zh-CN/component/quickstart
React:https://eleme.github.io/element-react/#/zh-CN/quick-start
Angular:https://element-angular.faas.ele.me/guide/start
Github:https://github.com/vue-bulma/vue-admin
cd vue-admin
npm install
npm run dev
現場演示:http://demo.open.renren.io/renren-fast (賬號密碼:admin/admin)
Gitee:https://gitee.com/renrenio/renren-fast-vue
renren-fast-vue基于vue、element-ui構建開發,實現renren-fast后臺管理前端功能,提供一套更優的前端解決方案
演示地址:http://vue.ruoyi.vip
文檔地址:http://doc.ruoyi.vip
RuoYi-Vue 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分離權限管理系統
現場演示:https://demos.creative-tim.com/vue-white-dashboard/?ref=devto
地址:https://www.creative-tim.com/product/vue-white-dashboard?ref=devto
Vue White Dashboard 是一個免費的開源Bootstrap 4和Vue.js Admin儀表板,其中包含大量的組件,這些組件可以組合在一起并看起來非常漂亮。Vue White儀表板具有16個以上的獨立組件,可讓您自由選擇和組合。這意味著有成千上萬種可能的組合。所有組件的顏色都可能不同,您可以使用SASS文件輕松進行修改。
現場演示:https://gruhn.github.io/vue-qrcode-reader/?rel=nofollow
github:https://github.com/gruhn/vue-qrcode-reader?rel=nofollow
Vue QRcode Reader是一組用于檢測和解碼QR碼的VueJS組件。它使您無需離開瀏覽器即可檢測和解碼QR碼。所有組件都具有響應能力。除此之外,它接近零樣式,因此您可以使它們適合您的布局。使用方法簡單明了。
現場演示:https://vuejsexpo.com/?ref=devto
VueJS Expo 使用Vue.js框架收集了許多精美的網站,應用程序和實驗。如果您是VueJS框架的粉絲,那么這里可能是受到啟發的地方。展示包括基于VueJS的主題,元素,儀表板等。
現場演示:https://demos.creative-tim.com/bs3/vue-paper-dashboard-pro/#/admin/overview?ref=devto
地址:https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto
Vue Paper Dashboard PRO 是建立在Bootstrap和Vue之上的漂亮資源。它將幫助您立即開始開發儀表板。Vue Paper Dashboard Pro是 Original Paper Dashboard Pro的VueJS移植版本。使用儀表板非常簡單,但是需要具備Javascript,Vue和Vue-Router的基礎知識。
現場演示:http://vue-color.surge.sh/?rel=nofollow
Github:https://github.com/xiaokaike/vue-color?rel=nofollow
Vue-Color 是來自Sketch,Photoshop,Chrome,Github,Twitter,Material Design等眾多酷炫色彩選擇器的集合。
現場演示:https://koel.dev/?rel=nofollow
Github:https://github.com/koel/koel?rel=nofollow
Koel 是一種簡單的基于Web的個人音頻流服務,在客戶端用Vue編寫,在服務器端用Laravel編寫。針對Web開發人員,Koel采用了一些更現代的Web技術-CSS網格,音頻和拖放API等來完成其工作。
現場演示:https://demos.creative-tim.com/vue-argon-dashboard/?ref=devto
地址:https://www.creative-tim.com/product/vue-argon-dashboard?ref=devto
Vue Argon Dashboard 是Bootstrap 4和Vue.js的儀表板。它是開源的,免費的,并且具有許多組件,可以幫助您創建出色的網站。Vue Argon儀表板內置了100多個單獨的組件,因此您可以選擇和組合。由于實現了所有元素,因此從原型制作到功能齊全的代碼,您將節省大量時間。該儀表板附帶了預先構建的示例,因此開發過程是無縫的,從我們的頁面切換到真實的網站非常容易。
現場演示:https://pagekit.com/?rel=nofollow
github:https://github.com/pagekit/pagekit?rel=nofollow
Pagekit 是使用Symfony組件和VueJS構建的模塊化,輕量級CMS。不管是個人博客還是公司網站,使用Pagekit都可以為Web創建功能強大的內容,使其在每種設備上都能完美運行。它具有干凈直觀的界面。它也有一個很棒的內置市場。
現場演示:https://demos.creative-tim.com/vue-material-dashboard-pro/?ref=devto#/dashboard
地址:https://www.creative-tim.com/product/vue-material-dashboard-pro?ref=devto
Vue Material Dashboard PRO 是基于Vue Material和VueJS構建的超棒高級管理模板。它是通過考慮您在儀表板中實際需要的東西而創建的。Vue Material Dashboard PRO包含精選和優化的VueJS插件。一切都旨在相互配合。使用儀表板非常簡單,但是需要具備Javascript,VueJS和Vue Router的基礎知識。
現場演示:https://demos.creative-tim.com/vue-material-kit/?ref=devto#/
地址:https://www.creative-tim.com/product/vue-material-kit?ref=devto
Vue Material Kit 是基于Vue Material和VueJS構建的驚人的免費開源資源。這將幫助您立即開始開發UI Kit。Vue材料工具包是原始材料工具包的官方VueJS版本。使用UI Kit非常簡單,但是需要Javascript,VueJS和Vue Router的基礎知識。
現場演示:http://pepf.nl/retrospective/?rel=nofollow
github :https://www.creative-tim.com/product/vue-material-kit?ref=devto
Retrospectify 是用Vue編寫的出色工具,用于數字化敏捷團隊回顧。當與遠程團隊進行回顧時,或者當您希望隨時間跟蹤回顧結果時,這將很有用。它具有三種注釋類型,您可以在注釋周圍移動或將點添加到各個注釋中。
現場演示:https://lauthieb.github.io/code-notes/?rel=nofollow
github :https://github.com/lauthieb/code-notes?rel=nofollow
如果您尚未使用VueJS,則應該知道它在Github上擁有超過164k的星星和88.7k的星星。很多!同樣,Vue是一種開源產品,這意味著任何人都可以為它做貢獻或從貢獻者那里學到新東西。
我希望這個清單可以在您的下一個開發項目中為您提供幫助
《如何寫出優秀后臺管理系統?11個經典模版拿去不謝「干貨」》
獲取 HTML 元素的位置坐標,可以使用 JavaScript 中的 DOM 操作來實現。下面是一個示例代碼,展示如何使用 JavaScript 獲取指定類名的元素的位置坐標:
htmlCopy code
<!DOCTYPE html>
<html>
<body>
<div class="my-element">This is a div element.</div>
<script>
// 獲取具有指定類名的元素
var element = document.querySelector('.my-element');
// 獲取元素的位置信息
var rect = element.getBoundingClientRect();
// 輸出元素的位置坐標
console.log('元素的左上角坐標:', rect.left, rect.top);
console.log('元素的右下角坐標:', rect.right, rect.bottom);
console.log('元素的寬度和高度:', rect.width, rect.height);
</script>
</body>
</html>
在上述代碼中,我們首先使用 querySelector() 方法獲取具有指定類名 .my-element 的元素。然后,使用 getBoundingClientRect() 方法獲取該元素的位置信息,返回一個包含左上角坐標、右下角坐標、寬度和高度等屬性的 DOMRect 對象。
最后,我們使用 console.log() 方法將元素的位置坐標輸出到控制臺。您可以根據實際需要使用這些坐標信息。
請注意,獲取的位置坐標是相對于視口(viewport)的坐標,而不是相對于整個頁面的坐標。如果需要獲取相對于頁面的坐標,可以結合 window.scrollX 和 window.scrollY 屬性進行計算。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。