2015-05-10 2 views
1


ОК, похоже, есть много вопросов + ответов, связанных с этой темой, но я не могу найти точный ответ, главным образом потому, что они, похоже, связаны с , устанавливая ширину ячейки. Меня это не интересует. Извиняюсь, если я пропустил это!В Dart, как мне получить ширину ячейки таблицы?

Я хочу нарисовать холст в ячейке, у которой не было установленной ширины.

У меня есть TableCellElement CELL, и я могу отображать innerHTML. Но я хочу добавить дочерний холст к CELL, поэтому мне нужна ширина ячейки.

CELL.style.width, CELL.clientWidth, CELL.client и т. Д. Все возвращают ноль, всегда.

Возможно, это ошибка Дарта, я неправильно об этом говорю, или это невозможно? Должен ли я найти столбец, в котором находится ячейка (как?), А затем найти его ширину?
Приветствия
Стив

ответ

2

index.html

<!DOCTYPE html> 

<html> 
    <head> 
    <style> 
     table,td { 
     border: 1px solid red; 
     } 
    </style> 
    </head> 
    <body> 
    <table> 
     <tr> 
     <td id="id1">xxx</td><td id="id2">yyyy</td><td id="id3"></td> 
     </tr> 
    </table> 

    <script type="application/dart" src="index.dart"></script> 
    <script src="packages/browser/dart.js"></script> 
    </body> 
</html> 

index.dart

import 'dart:html'; 

void main() { 
    printWidth('id1'); 
    printWidth('id2'); 
    printWidth('id3'); 
} 

printWidth(String id) { 
    print('${id}:'); 
    CssStyleDeclaration elem = querySelector('#${id}').getComputedStyle(); 

    print('width: ${elem.width}'); 
    print('borderLeftWidth: ${elem.borderLeftWidth}'); 
    print('borderRightWidth: ${elem.borderRightWidth}'); 
    print('paddingLeft: ${elem.paddingLeft}'); 
    print('paddingRight: ${elem.paddingRight}'); 
} 

печатает

id1: 
width: 24px 
borderLeftWidth: 1px 
borderRightWidth: 1px 
paddingLeft: 1px 
paddingRight: 1px 
id2: 
width: 32px 
borderLeftWidth: 1px 
borderRightWidth: 1px 
paddingLeft: 1px 
paddingRight: 1px 
id3: 
width: 0px 
borderLeftWidth: 1px 
borderRightWidth: 1px 
paddingLeft: 1px 
paddingRight: 1px 
+0

Hi Gunter, Большое спасибо за это. Моя таблица полностью сгенерирована/динамическая - я определяю только

в html-файле. Я попытался установить cell.id = '# a' + cell.hashcode.toString() (когда я создаю ячейку). Затем я использую ваш метод выше, но возвращаемый «elem» всегда имеет значение null. Я вызываю его сразу после установки cell.id. :(Cheers, Steve – Lymp

+1

'#' является частью селектора, а не идентификатора. '#' Означает «querySelector», он должен искать идентификатор, а не имя тега. См. Мой код, только в коде Dart ' # 'используется, но не в части HTML. –

+0

Привет, Извините, моя опечатка здесь. Мой код был er ... 'correct'. Но я теперь попробовал cell.id = '' A" + hashcode.tostring() и запрос как querySelector ('# $ {id}'). Без изменений. – Lymp

0

Это со мной работало:

 cell.contentEdge.width; 
Смежные вопросы